web-dev-qa-db-fra.com

Google Maps ne rend pas tout à fait sur la page?

J'ai une carte Google sur ma page avec un volet de recherche que j'ai construit moi-même, qui peut être affiché et masqué à volonté. Il recouvre comme, disons, 200 pixels de la carte sur un côté. Le fait est que lorsque je redimensionne ma carte, la zone où le volet se chevauche n'est pas rendue, c'est-à-dire que la carte ne s'affiche pas pour une raison quelconque.

Découvrez ce link

Dans la zone Type, entrez OMDB qui est un code icao pour un aéroport et appuyez sur Entrée.

Les résultats sont affichés et vous voyez le volet. Maintenant, cliquez sur le lien plein écran, puis sur l'onglet aéroports pour faire disparaître le panneau. Vous voyez maintenant qu'une partie de la carte n'a pas été rendue du tout ... Je dois faire glisser la carte et ne la rendre que partiellement. cette zone. Comment puis-je le réparer?

FYI je l'ai exécuté sur Google Chrome, Firefox et IE8 sur Windows XP. Est-il un moyen de la force comme le rendu complet d'une carte ou si? C'est un problème assez erratique et pourrait-il s'agir de mon code ou s'agit-il d'un problème d'hôte? Ou est-ce que Google ne m'aime pas? :(

EDIT: Voir le gros patch laid sur le côté. Sa superficie unrendered où la carte aurait dû être rendue aussi. Aucune quantité d’agrandissement et de panoramique n’aide à effacer ceci :(

javascriptcssgoogle-maps
18
Ali

Je ne parviens pas à reproduire le problème que vous rencontrez, mais il ressemble à un autre problème que j'ai vu avec Google Maps.

Il semble que vous ayez peut-être mal à la façon dont Google Maps détermine les tuiles affichées. Il ne calcule cela qu'une seule fois, lorsque la carte est chargée dans le div pour la première fois, et si le div grandit, la carte dessinée sera insuffisante. Heureusement, c'est facile à gérer. chaque fois que le conteneur peut avoir été redimensionné, utilisez la méthode checkResize() sur l'instance de carte et la zone de découpage sera recalculée à partir de la taille actuelle du conteneur.

17
SingleNegationElimination

Oui, vous DEVEZ fournir une hauteur et une largeur réelles du conteneur DIV. Ceci est en fait détaillé dans l'API Google.

En utilisant quelque chose comme ceci: 

<div id="map_canvas" style="width:500px;height:500px;"></div>

au lieu de

<div id="map_canvas"></div>

vous serez chez vous gratuitement!

14
Jay Lepore

Autant que je sache, cela fonctionne bien sous OS X 10.6.2 dans Google Chrome.

http://i33.tinypic.com/sfe3ah.png

Le seul problème, c’est que l’aéroport de Copenhague est loin de l’emplacement que votre application implique. Et LAX est au milieu de l'océan ;-)

Modifier:
Je vois votre capture d'écran et il me semble que Google Maps ne restitue pas la partie de la carte recouverte par le volet de recherche et le résultat de la recherche et que, par la suite, le rendu n'est pas déclenché correctement lorsque vous masquez la volet de recherche.

Je n'ai pas réussi à trouver un déclencheur de rendu décent dans l'API Google Maps, mais je pense que vous devriez essayer d'effectuer un zoom avant ou arrière par programme ou un déplacement du centre de la carte ailleurs et en arrière, afin de forcer le déplacement. rendu de la carte.

Vous pouvez également essayer de déclencher manuellement certains des événements susceptibles de déclencher un nouveau rendu de la carte, par exemple google.maps.event.trigger(map, 'resize').

Je sais que ces suggestions sont un moyen terrible de faire fonctionner le piratage informatique. Je ne sais pas très bien si cela fonctionnerait, mais c'est mon meilleur coup ;-)

12
phidah

J'ai rencontré le même problème lorsque j'ai essayé de charger Google Map dans la boîte de dialogue. C'était comme si Google map n'était pas rendu correctement. donc je trouve ci-dessous la solution qui peut résoudre votre problème.

J'ai déclenché un événement de redimensionnement google map après le dialogue d'initialisation, veuillez vérifier le code ci-dessous.

google.maps.event.trigger(map, 'resize', function () {
    // your callback content
});

Exemple:

J'ai chargé la carte par appel ajax puis la boîte de dialogue initialisée et enfin déclenché un événement de redimensionnement de la carte Google.

$.ajax({
    url:"map.php",
    type:"POST",
    success:function(data){
        $("#inlineEditForm").html(data);

        $('#inlineEditPopUp').dialog('open');
        google.maps.event.trigger(map, 'resize', function () {
            // your callback content
        });
    }
});
4
Nikunj Bambhroliya

Si vous utilisez le plugin jQuery goMap , vous devez utiliser:

google.maps.event.trigger($.goMap.map, 'resize');

Bien que vous deviez envelopper cela dans un événement pour qu'il soit exécuté lorsque la carte est affichée. Voici comment je le fais dans mon code:

$(document).on('click', '#mapClicker', 'initmap', function() {
   setTimeout(function() {
         google.maps.event.trigger($.goMap.map, 'resize');
      $.goMap.fitBounds();
   }, 100)
});
3
DarkMukke

Dans Google Maps V3, le peu de magie dont vous avez besoin est documenté ici: https://developers.google.com/maps/documentation/javascript/reference#Map Sous événements

Les développeurs doivent déclencher cet événement sur la carte lorsque la div change de taille : Google.maps.event.trigger (map, 'resize').

Le truc est de savoir when appeler ceci qui sera situationnel en fonction de votre code. Si vous utilisez Bootstrap 3 Modals, cela fonctionne à merveille.

$("#modal-map")
    .modal()
    .on("shown.bs.modal", function() {
        google.maps.event.trigger(gmap, 'resize');
    });

Où gmap est l'objet google.maps.Map que vous avez créé.

3
dpjanes

Je sais que cette question est un peu ancienne, mais je viens de rencontrer un problème similaire. Cependant, dans mon cas, je configurais la carte pour qu'elle soit chargée à partir du corps (pour un effet plein écran) dans une iframe.

Comme Jay l'a mentionné dans sa réponse, il faut spécifier un width et height que je n'avais pas encore fait.

J'ai changé:

<body style="margin:0;">

à:

<body style="margin:0;width:100%;height:100%">

et maintenant, il se charge parfaitement sur Chrome, Firefox et Internet Explorer 10.

J'espère que cela aidera tous ceux qui ont également rencontré ce problème. Vous devez spécifiez width et height pour qu'il fonctionne sur différents clients.

Cordialement

1
Carlos F

J'ai eu le même problème et l'ai résolu simplement en changeant la largeur du div contenant en "px" au lieu de "%" (par exemple width = "700px" au lieu de "80%"). Je suppose que Google peut faire un meilleur calcul de la taille de cette façon ... je ne le garantis pas mais cela m'a aidé

0
Okultis

Dans mon cas, les mêmes problèmes s’appliquent aux périphériques Mac sur: Safari 5.1.7 (Sous Windows 10 [Désolé]) Safari 5.1 (Ipad 1 [Ancien désolé]) Safari 10 (Iphone 6 Plus) Ici, ma solution fonctionne pour moi: 1) capturer la largeur du navigateur detect.min.js 2) modifier le paramètre de largeur du style attr 3 ) redimensionner la carte

/* Of course insert detect.min.js and Jquery in your HTML ;)*/
var user = detect.parse(navigator.userAgent);
var browserFamily=user.browser.family;
var browserVersion=user.browser.version;
if ( browserFamille=="Mobile Safari" || browserVersion.substr(0,3)=="5.1") {
    canvasWidth = $(window).width(),
    $(".macarte").attr("style","width:"+canvasWidth+"px")
    google.maps.event.trigger(map, 'resize');
}
/* browserFamily returns "Mobile Safari" for tablet and mobile devices; "Safari" for desktop devices */

0
Mattabile

J'avais ce problème et j'ai trouvé que la seule solution (dans mon cas) était de déclencher le redimensionnement en ligne après l'élément. Je ne peux pas dire pourquoi mais j'ai trouvé un fil conducteur où quelqu'un avait aussi cette solution. (désolé pas réf.) Ma configuration était un peu différente; c'était à partir d'une page injectée jQueryMobile, donc l'instanciation tardive peut avoir quelque chose à voir avec mon problème. Espérons que cela aide quelqu'un.

<div id="my-map"></div>
<script type="text/javascript">
  $('#my-map').height($("#my-map-container").height());
  $('#my-map').width($("#my-map-container").width());
  google.maps.event.trigger($('#my-map'), 'resize');
</script>
0
lucygenik