Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 ?

like image 577
Ahmad Avatar asked Mar 02 '16 09:03

Ahmad


People also ask

How do I print a large Google map larger than the screen?

Since you can export the visible map canvas straight from the portal, then it's possible to make it larger than your device screen. The rule is simple – just click the “Crtl -“ at once in order to zoom out your map.


1 Answers

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?

like image 193
Dmitriy Avatar answered Sep 26 '22 06:09

Dmitriy