Google Maps is grey

问题:

I am using google maps in a mobile application using html and javascript. When the I load the map I am only able to see 5% of the map in the upper left corner. 95% of the div container is grey. When I want to check the div with Firebug the whole map is loaded suddenly. What can that be? I tried already several Stackoverflow threads but no solution worked for me. Thank you.

Code:

  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 doesnt work at all.

回答1:

Try calling the resize method on document ready too:

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

回答2:

Check your mapOptions whether its center or other properties are correct. In my occasion, center property was uninterpretable by google map; although the page was totally errorless in terms of css and jsp, it showed me just grey map all the time.

回答3:

For my case, just calling map.refresh() fixed this issue. I am using Gmaps.

回答4:

This happened to me because the mapTypeId was NULL.

Try:

map.setMapTypeId("roadmap"); 

回答5:

In my case I had missed to provide the Longitude which came from an external API. Once the API was fixed to include Longitude, the issue was solved.

回答6:

I had a similar question using angular 5
I could only get the map to refresh / recreate by using a setTimeout AND a setZoom (even though 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 fascinating about the refresh, is that it moves the map the second time it is displayed. Google maps is clearly not bug free.

文章来源: Google Maps is grey