google map show after screen resize?

Nothing worked for me. I was using Model box in Bootstrap to load the map. I tried everything for hours. Every time I would load the map I would see a grey box, but as soon as i would resize the browser, it would display the map. Seemed it required resizing of window. So I put all the map functionality into a function called initmap2() and displayed the fresh map inside it. and upon clicking i used

setTimeout( initMap2, 200 );

So as soon as the Modal box would open, it would display the map, and I tried working will 100 milliseconds but I guess it works with 200+ milliseconds so I kept 500ms just to be safe.

I hope this helps


call google.maps.event.trigger(map, 'resize') when your "div id=map" will be visible. Please see How do I resize a Google Map with JavaScript after it has loaded?