CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3same-origin-policy
Dominic P
Dominic P

Reputation: 2404

Google Maps Loading Async Issues

I'm trying to get Google Maps API v3 to work on my site and I'm running into 2 problems.

  1. I'm using yepnope to load the API script asynchronously, and I get a "Load denied by X-Frame-Options" error in my console. It says http://maps.googleapis.com/maps/api/js?sensor=false&callback=init_google_maps&ver=3.0 does not permit cross-origin framing. This is odd to me because I'm not loading anything in a frame of any kind. Note that the map still loads, but the error in the console concerns me.

  2. The map controls aren't displaying correctly. I don't think that this is related to the first issue because I get this even when I load the API the traditional way (synchronously), but it might be related in some way.

enter image description here

I'm not sure if it matters, but I'm running this on my "localhost" testing server. Any ideas on what could be causing these issues?

Update: As discussed below, the X-Frame issue only occurs when I load the API via yepnope. I can't understand why using yepnope to inject a script tag causes the error and using a simpler js function doesn't though. My main concern, however, is the display of the map. I tested the map on a more stripped down page on my local server, and it displayed correctly. So, my current assumption is that I have a style (or script?) declared somewhere on the page that's interfering with Google maps.

Update 2: Ok, the display issue if finally sorted out. I went through my main stylesheet and commented out portions until I had found the culprit. In order to make my images responsive in my fluid layout, I had declared img { max-width: 100%; }. Apparently, Google Maps don't like this. Once I overrode that style for the map container, everything displayed normally. The X-Frame issue still confounds me however.

Upvotes: 2

Views: 1812

Answers (1)

Michael Geary
Michael Geary

Reputation: 28850

Regarding the first problem, if you want to load the Maps API asynchronously, I would suggest using the technique described in the API documentation directly (a simple dynamically inserted <script> element) instead of yepnope. It should work fine that way.

On the second problem, running on localhost is no problem; that's a normal way to test a Maps API page. (I assume you mean using a local web server and loading your page in the browser from a localhost:// URL, not a file:// URL.)

Some symptoms like this can be caused by the map container element not being properly sized when the map is first created. In particular, trying to use height:100% can be problematic. But it's hard to guess without seeing a running example. Can you post the code to a web page somewhere? Maybe even in a JSFiddle if nothing else.

Upvotes: 1

Related Questions