Google Maps is grey

Question

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 di

Answer 1

In my case my map wasn't loading because I didn't set a zoom option.

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)                               
});

Answer 2

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

Answer 3

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');
});

Answer 4

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.

Answer 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.

Answer 6

This happened to me because the mapTypeId was NULL.

Try:

map.setMapTypeId("roadmap");