Google maps gray

Question

I use Google maps in a mobile application using html and javascript. When I load a map, I can only see 5% of the map in the upper left corner. 95% of the container div is gray. When I want to check the div with Firebug, the whole map loads suddenly. What could it be? I tried several Stackoverflow threads already, but not a single solution worked for me. Thanks.

the code:

<link type="text/css" rel="stylesheet" href="jquery.mobile...> <link type="text/css" rel="stylesheet" href="index.css"> <script type="text/javascript" src="jquery.mobile...></script> <script type="text/javascript" src="jquery.mobile/jquery.mobile...></script> <script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"> </script> <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> <script type="text/javascript" charset="utf-8" src="index.js"></script> <div id="map" style="width: 700px; height: 700px;"></div> var map = new google.maps.Map(document.getElementById('map'), { zoom: 10, center: new google.maps.LatLng(-33.92, 151.25), mapTypeId: google.maps.MapTypeId.ROADMAP }); 

index.js

 $(document).ready(function() { $(window).resize(function() { google.maps.event.trigger(map, 'resize'); }); }); 

When I use div attributes measured in% or em, it doesn't work at all.

Answer 1

Try also calling the document resizing method:

 $(document).ready(function() { $(window).resize(function() { google.maps.event.trigger(map, 'resize'); }); google.maps.event.trigger(map, 'resize'); }); 

Answer 2

Check if your center or other properties are correct. In my case, the center property was uninterpreted on the google map; although the page was absolutely error-free in terms of css and jsp, it only showed me a gray map all the time.

Answer 3

In my case, just calling map.refresh() fixed this problem. I am using gmaps.

Answer 4

This happened to me because mapTypeId was NULL.

Try:

 map.setMapTypeId("roadmap"); 

Answer 5

In my case, I missed providing the longitude coming from the external API. After the API was turned on to enable Longitude, the problem was resolved.

Answer 6

I had a similar question using angular 5
I could only get a map to update / recreate using setTimeout AND a setZoom (although the level is the same)

 // set timeout. setTimeout(() => { console.log("attempting refresh"); google.maps.event.trigger(this.map, "resize"); this.map.setZoom(8); }, 100); 

Working plunker here

What's exciting about the update is that it moves the map a second time. Google maps are clearly not error free .

Answer 7

In my case, my map did not load because I did not set zoom .

 var map = new google.maps.Map(document.getElementById('map'), { zoom: 10, // Forgot to set this prop center: new google.maps.LatLng(-33.92, 151.25) });