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
and after re size browser window it appears perfectly like this
kindly tell me how to fix this problem ?
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.
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?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With