web-dev-qa-db-fra.com

Google Maps est gris

J'utilise Google Maps dans une application mobile utilisant HTML et javascript. Lorsque je charge la carte, je ne peux voir que 5% de la carte dans le coin supérieur gauche. 95% du conteneur div est gris. Lorsque je veux vérifier le div avec Firebug, la carte entière est chargée soudainement. Qu'est-ce que cela peut être? J'ai déjà essayé plusieurs threads Stackoverflow mais aucune solution n'a fonctionné pour moi. Merci. 

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

Lorsque j'utilise des attributs div mesurés en% ou en em, cela ne fonctionne pas du tout.

javascripthtmlgoogle-maps-api-3
11
AppRoyale

Essayez d’appeler la méthode de redimensionnement lorsque le document est prêt:

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

Vérifiez vos mapOptions si son centre ou d’autres propriétés sont correctes. Dans mon cas, la propriété du centre était ininterprétable par google map; bien que la page fût totalement sans erreur en termes de CSS et de JSP, elle me montrait toujours une carte grise tout le temps. 

16
Ismail Kuyu

Dans mon cas, j'avais manqué de fournir la longitude provenant d'une API externe. Une fois que l’API a été corrigée pour inclure Longitude, le problème a été résolu. 

0
Faheem Hameed

Dans mon cas, la carte ne se chargeait pas car je n'avais pas défini l'option 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)                               
});
0
Rob

Dans mon cas, le simple fait d'appeler map.refresh() a résolu ce problème. J'utilise Gmaps.

0
stealthysnacks

Cela m'est arrivé parce que mapTypeId était NULL.

Essayer:

map.setMapTypeId("roadmap");
0
user3709875

J'ai eu une question similaire en utilisant angular 5
Je ne pouvais que rafraîchir/recréer la carte en utilisant un setTimeoutETa setZoom (même si le niveau est le même)

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

Plunker de travail ici

Ce qui est fascinant dans cette actualisation, c’est qu’elle déplace la carte lors de sa deuxième affichage. Google Maps n’est clairement pas sans bug .

0
Jim