La carte Google s'affiche partiellement, la zone grise s'affiche à la place des images du serveur Google.

Question

Parfois, google map s'affiche partiellement avec d'autres zones en grisé. Il y a un problème, si nous lançons Firebug, les images apparaissent dans cette zone grise. Je ne sais pas pourquoi cela se produit. Si quelqu'un a déjà rencontré ce problème et trouvé une solution, merci de partager.

Answer 1

MISE À JOUR 27/02/2020
Il n'est plus nécessaire de déclencher manuellement l'événement de redimensionnement.

Si vous utilisez la v3, essayez

google.maps.event.trigger(map, "resize");

Jetez également un coup d'œil à ici

Answer 2

Ce bogue peut se produire si vous redimensionnez l'écran de la carte. DIV . Après le redimensionnement, essayez d'appeler gmap.checkResize() fonction.

Answer 3

Bonjour, si vous utilisez le toggle dans un div avec un conteneur de carte, vous devez appeler resizeMap dans la fonction.

associated with the trigger:
        $(".trigger").click(function(){
        $(".panel").toggle("fast");
        $(this).toggleClass("active");
         resizeMap();
        return false;

puis resizeMap() ; comme ceci

function resizeMap()
{
google.maps.event.trigger(map,'resize');
map.setZoom( map.getZoom() );
}

n'oubliez pas de définir la variable map comme globale ;) salutations

Answer 4

J'ai trouvé une solution simple pour le chargement partiel de google map. Habituellement, cela est causé par le onLoad() est appelé à des moments où le reste de la page (y compris votre élément de carte) n'est pas complètement chargé. Cela entraîne un chargement partiel de la carte. Un moyen simple de contourner ce problème consiste à modifier votre élément onLoad action de la balise body.

L'ancienne méthode :

onload="initialize()"

La nouvelle voie :

onLoad="setTimeout('initialize()', 2000);"

Cela permet d'attendre 2 secondes avant que le Javascript de Google n'accède aux attributs de taille corrects. Veillez également à vider le cache de votre navigateur avant de l'essayer ; il arrive qu'il y reste bloqué :)

Au cas où vous vous poseriez la question, il s'agit de ma partie supérieure en Javascript (exactement comme décrit dans la documentation de Google, mais parce que j'appelle la fonction Latitude et Longitude à partir de variables PHP, d'où les extraits PHP.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
    var myOptions = {
        center: new google.maps.LatLng(<?php echo $my_latitude; ?> , <?php echo $my_longitude; ?>),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

    var point = new google.maps.LatLng(<?php echo $my_latitude; ?> , <?php echo $my_longitude; ?>);
    var marker = new google.maps.Marker({ position:point, map:map })    
}
</script>

Answer 5

Je veux juste ajouter à cette discussion que j'ai eu ce problème avec les bandes grises aussi bien, et ce n'était pas le même problème que j'avais besoin d'utiliser la fonction gmap.Resize mais que c'était dans mon css. Dans mon css, j'avais

img { 
max-width:50% 
}

Ainsi, lorsque je place ceci dans mon fichier css

#map-canvas { 
max-width:none;
}

Le problème a disparu ! J'ai cherché dans tout Google mais je n'ai pas trouvé cette réponse.