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

I found this working only after combine two things: setTimeout and google resize.

So, at the end of initMap, I set:

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

And create a setTimeout for the initMap like this:

$(document).ready(function(){ setTimeout(initMap, 1000); }); 

-- Edit

To answer @LucaC.: my initMap is a separate js, that I link into the pages. The solution above is defined in this js (the setTimeout only).

But, after a while, I noticed this problem still happening with mobile devices.

Working around: keep the setTimeout for the initMap and on the page I load the map, I've set up

$(window).load(function(){ setTimeout(function(){ google.maps.event.trigger(map, "resize"); }, 250); }); 

So: i) delay anything that break the map; ii) at the end of all, resize the map after page load :)

Nothing worked for me. I was using modal box in bootstrap to load the map. i did following code may it will help you

First i load map in body with display:none like below

 <div style="display:none; overflow:hidden; width:100%; height:400px;" id="map"></div> 

by initMap method, map will load properly but we used display=none so that map will not display. For display that map in model i append the div which have id="map" to id="map-modal" which is in the model. like below

$('#modal-id').on('shown.bs.modal', function () { document.getElementById('map').style.display = ""; var mapNode = map.getDiv(); $('#map-modal').append(mapNode); }); 

May it will work.

Resize your map without javascript

step 1: Go to google maps and after searching your location, click on share and Get the Google Maps Embed Code

step 2: code will look something like this

<iframe src="/" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> 

step 3: Add a div tag around the embed code. Use the CSS class map-responsive

<div class="map-responsive"> <iframe src="/" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> </div> 

step 4: Add your Google Maps CSS

.map-responsive{ overflow:hidden; padding-bottom:56.25%; position:relative; height:0; } .map-responsive iframe{ left:0; top:0; height:100%; width:100%; position:absolute; } this will make your map responsive to any screen size.!!