Google maps shows gray screen instead of map

Question

GoogleMaps is shown as gray box instead of map. And on windows resize it works correctly.
On window load maps show like this:

After window resize map works correctly:

<div style="width:100%; height:400px; padding:0; margin:0; border:3px solid gainsboro; border-radius:3px;">
    <div id="canvas" style="width:100%; height:100%; padding:0; margin:0;"></div>
 </div>

<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY"></script>
<script>
 var map;
 var latLong;
 $(window).load(function () {
    latLong = new google.maps.LatLng(47.0303105, 28.815481);
     map = new google.maps.Map(document.getElementById('canvas'), {
         center: latLong,
         mapTypeId: google.maps.MapTypeId.ROADMAP,
         zoom: 14
     });
            console.log("Map is ready.")
 });
</script>

PS Map is declared in a bootstrap modal div
Thanks for help.

Since it is more likely a rendering issue, please give more details on how to replicate or better yet a fiddle or a plunk. — Tariq B., Feb 14 '17 at 09:21

score 7 · Accepted Answer · answered Feb 14 '17 at 09:25

7

Google guys made special event trigger, which I use in this case to prevent gray map:

google.maps.event.trigger(map, 'resize');

You need to call 'resize' after your map-code complete or even with a some small delay. Try to insert this trigger right after your line console.log("Map is ready.")

answered Feb 14 '17 at 09:25

MysterX

2,318
1
12
11

Thanks for help, I found answer there http://stackoverflow.com/questions/11742839/showing-a-google-map-in-a-modal-created-with-twitter-bootstrap – Vladlen Gladis Feb 14 '17 at 09:42

Google maps shows gray screen instead of map

1 Answers1