CODEWITHSUNDEEP
javascripthtmlgoogle-maps-api-3
AppRoyale
AppRoyale

Reputation: 403

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:

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

Upvotes: 13

Views: 39752

Answers (7)

Rob
Rob

Reputation: 4947

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

Upvotes: 4

Jim
Jim

Reputation: 16002

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.

Upvotes: 0

Faheem Hameed
Faheem Hameed

Reputation: 83

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.

Upvotes: 0

stealthysnacks
stealthysnacks

Reputation: 1141

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

Upvotes: 0

user3709875
user3709875

Reputation: 69

This happened to me because the mapTypeId was NULL.

Try:

map.setMapTypeId("roadmap");

Upvotes: 0

kuyu
kuyu

Reputation: 362

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.

Upvotes: 21

Douglas
Douglas

Reputation: 37763

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

Upvotes: 20

Related Questions