web-dev-qa-db-fra.com

Google map vient partiellement, la zone grise vient à la place des images de google server

Parfois, Google Map vient partiellement avec d’autres zones estompées. Il y a un problème, si nous démarrons Firebug, les images apparaissent dans cette zone grise. Je ne sais pas pourquoi cela se produit ... Tout le monde a déjà expérimenté cela et trouvé une solution, partagez-le, s'il vous plaît.

javascriptgoogle-mapsgoogle-maps-api-2
59
Vishwanath

Ce bogue peut survenir si vous redimensionnez la DIV de la carte. Après le redimensionnement, essayez d’appeler la fonction gmap.checkResize(). 

36
Hitman_99

Si vous utilisez v3, essayez 

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

Jetez également un coup d'œil à ici

79
Argiropoulos Stavros

Bonjour, si vous utilisez une bascule dans une div avec un conteneur de carte, vous appelez resizeMap dans la fonction 

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

puis resizeMap (); comme ça

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

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

7
MRodrigues

J'ai trouvé une solution simple pour la carte Google partiellement chargée. Cela est généralement dû à l'appel de la onLoad() à des moments où le reste de la page (y compris votre élément de carte) n'est pas complètement chargé. Cela provoque un chargement partiel de la carte. Un moyen simple de contourner ce problème consiste à modifier votre action onLoad body tag.

L'ancienne manière:

onload="initialize()"

La nouvelle façon:

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

Cela attend 2 secondes avant que Google Javascript accède aux attributs de taille appropriés. Assurez-vous également de vider le cache de votre navigateur avant de l'essayer. parfois ça s'y coince :)

C’est ma partie Javascript la plus intéressante au cas où vous vous poseriez la question (exactement comme décrit dans la documentation Google mais parce que j’appelle les variables Latitude et Longitude de 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>
7
Milan

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

img { 
max-width:50% 
}

alors quand je mets cela dans mon fichier css

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

Le problème a disparu! J'ai regardé partout sur Google mais n'ai pas pu trouver cette réponse.

4
Izekid

Les solutions ci-dessus, rien ne fonctionne pour moi.

J'ai utilisé display:none pour ma carte. En le changeant en visibility:hidden, cela fonctionne bien pour moi.

Changement 

display:none

À

visibility:hidden

1
Muthu17

ce style a résolu mon problème

#map_canvas img { max-width: none !important; }

Cela oblige le navigateur à permettre à la carte d'être aussi large que nécessaire - le !important signifie essentiellement "ne pas écraser ce style".

1
Ahmad Alaa

Je l'ai résolu de cette façon, mon problème était dans le dispositif de rotation, cette solution fonctionne très bien:

$scope.orientation = function(){
            var supportsOrientationChange = "onorientationchange" in window,
                orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
            window.addEventListener(orientationEvent, function() {
                $interval(function(){
                    google.maps.event.trigger(map, 'resize');
                },100);
            });
        };
$scope.orientation();
0
Kike Jimenez

Ce problème est survenu alors que je travaillais sur d'autres parties de mon site. Je ne l'avais donc pas remarqué dès le début. Après avoir passé en revue tous les changements apportés au cours de la dernière heure, je suis tombé sur le coupable:

div
{
    [... other css ...]
    overflow: auto;
}

dans mon css . J'ai enlevé ça et le tour est joué, ça marche. (Bien sûr, je pourrais simplement changer l'attribut de débordement sur mon div de carte mais je n'ai besoin que de débordement: auto sur quelques divs.) Je suis sûr qu'il y a une bonne raison pour laquelle mais je suis assez nouveau dans ce domaine alors je ne le fais pas savoir. Quoi qu'il en soit, j'espère que cela peut aider quelqu'un.

0
hiqwertyhi