Google Maps v3 load partially on top left corner, resize event does not work

Question

Google Maps V3 loaded partially on top left corner. I tried the following methods:

• Add google.maps.event.trigger(map, \'resize\'); after map in

Answer 1

I had the issue with all maps other than the first loaded map showing in the top left corner with the rest of the map having not loaded and therefore showing in grey.

Was scratching my head for some time but managed to solve it with:

google.maps.event.addListenerOnce(map, 'idle', function() {
       google.maps.event.trigger(map, 'resize');
       map.setCenter(latLng);
    });

It was a easy solution thanks to Ian Devlin and d.raev and just wanted to say thanks and share the code that solved it for me seeing as I can't comment or vote up yet!

I called that after creating the map with:

map = new google.maps.Map(document.getElementById("business-location-"+business_username), map_options);

so if you've got this problem put it right under where you create your map too!

Answer 2

I think your map is hidden at the time you create it: there's a display:none on the #summary-content div that the map is nested inside.

You should try triggering the resize event after that div is made visible instead of during initialization.

In fact, you could probably just call your initializeMap() function event at the time that div is made visible, instead of calling it in your .ready() function.

Answer 3

I just got a similar issue (map loaded in container expanded with animation)

As @Ian Devlin part of the solution is, is to trigger resize event after all is visible.
The second part is to fix the center (as it is usually in the top left corner):

google.maps.event.addListenerOnce(map, 'idle', function() {
   google.maps.event.trigger(map, 'resize');
   map.setCenter(center); // var center = new google.maps.LatLng(50,3,10.9);
});

Answer 4

Use pageshow event with the shown format. It worked for me.

$(document).on('pageshow', '[data-role="page"]#mapPage' , function(){
initialize(); });

Answer 5

Google Maps does not play well with Bootstrap. Try adding the following CSS to your map element

#map-canvas img {
  max-width: none;
}

Twitter Bootstrap CSS affecting Google Maps

Answer 6

I've had this issue before too and fixed it by waiting for the map's 'idle' state (i.e. when it's finished) and then calling the resize:

google.maps.event.addListenerOnce(map, 'idle', function() {
   google.maps.event.trigger(map, 'resize');
});