CODEWITHSUNDEEP
javascriptjqueryhtmlcssgoogle-maps
Ahmad
Ahmad

Reputation: 1474

google map show after screen resize?

I'm having problems with the google map I'm embedding, I don't understand why on load the map not appears and only appear when I resize the window, I went through different solutions in stackoverflow but they don't work for me.

Here is my js code:

<script>
function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 31.554606, lng: 74.357158},
          zoom: 14
        });
 google.maps.event.addListenerOnce(map, 'idle', function() {
               google.maps.event.trigger(map, 'resize');
            });
         } 
</script>

my div

<div id="map"></div>

when i load application it appears like enter image description here

and after re size browser window it appears perfectly like this enter image description here

kindly tell me how to fix this problem ?

Upvotes: 14

Views: 13739

Answers (5)

vidy
vidy

Reputation: 1640

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.!!

Upvotes: 0

Renish Gotecha
Renish Gotecha

Reputation: 2522

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.

Upvotes: 0

PJ.Wanderson
PJ.Wanderson

Reputation: 1862

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 :)

Upvotes: 2

Imran Ud Din
Imran Ud Din

Reputation: 69

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

Upvotes: 4

Dmitriy
Dmitriy

Reputation: 3765

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?

Upvotes: 9

Related Questions