web-dev-qa-db-fra.com

Google Map incorporé est mal affiché jusqu'au redimensionnement de la page Web

J'essaie d'afficher une carte sur ma page Web pour en obtenir les coordonnées. Cela fonctionne bien, je peux glisser et déposer un marqueur et obtenir les coordonnées dans les zones de saisie.

Mais mon problème vient quand je charge la page Web. Tout est bien affiché sauf la carte, vous pouvez voir comment la carte est affichée:

Wrong map

Mais si en ce moment je redimensionne la page Web, je veux dire, si elle était en plein écran, la mettre à moitié. Ou rendez-le un peu plus grand ou plus petit s'il ne s'agissait que d'une partie de l'écran. Ensuite, vous verrez la bonne carte: right map

(Ce n'est pas le même endroit, je sais. J'ai pris l'image de 2 recharges)

Je crée la page Web en HTML, mais je l'appelle comme s'il s'agissait de pages Web distinctes. Lorsque vous chargez l'index, vous obtenez un bouton avec cette 

href:<a href="#openMap">

Et, la partie montrée sera:

<div data-role="page"  id="openMap" data-theme="e">
<div data-role="header" data-id="fixedNav" data-position="fixed">
    blablabla
    <div data-role="content">
        <form action="">
            <div id="map_canvas" style="width:500px; height:300px"></div>
            blablabla

Et tous les divs, les formulaires ... correctement fermés. J'ai beaucoup de champs de saisie et de champs que je n'ai pas mis ici.

Ensuite, dans mon script de carte Google, j'ai ceci:

var map;
function initializeNewMap() {
  var myLatlng = new google.maps.LatLng(43.462119485,-3.809954692009);

  var myOptions = {
     zoom: 14,
     center: myLatlng,
     mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

  var marker = new google.maps.Marker({
      draggable: true,
      position: myLatlng, 
      map: map,
      title: "Your location"
  });

}

Mais je ne sais pas pourquoi j'ai besoin de redimensionner. Est-ce un moyen de le résoudre?

EDIT: J'ajoute plus d'informations:

J'appelle la partie de la page Web qui a la carte de cette façon:

$(document).on("pageinit", '#openMap', function() {

J'ai essayé de mettre

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

juste après mais rien ne se passe.

SOLUTION:

J'ai trouvé la solution dans une autre question ( Google Maps v3 se charge partiellement dans le coin supérieur gauche, l'événement de redimensionnement ne fonctionne pas , publication de Ian Devlin):

Comme un utilisateur l’a dit ici, je dois redimensionner la carte. Mais juste cette ligne n'a pas fonctionné. J'ai ajouté ce code à la fin de la fonction d'initialisation:

google.maps.event.addListenerOnce(map, 'idle', function() {
    google.maps.event.trigger(map, 'resize');
});

Donc, il est juste appelé après l'affichage de la carte. 

javascripthtmlgoogle-maps
46
Biribu

Moi aussi j'ai fait face à ce problème, je l'ai résolu en déclenchant Google mapsresize.

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

Mises à jour: 

var map;
function initializeNewMap() {
 // add your code
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
  google.maps.event.trigger(map, 'resize');
}

J'espère que tu as compris.

19
Praveen

J'ai eu un problème similaire mais vous ne pouviez voir aucune partie de la carte (la boîte entière était grise).

Ce qui l’a résolu pour moi a été de réaliser que la div qui contenait la carte commençait comme cachée en utilisant

display:none;

Si vous utilisez plutôt 

visibility:hidden;

La div conserve sa taille tout en apparaissant toujours comme étant masquée. La carte, une fois initialisée, utilise sa hauteur et sa largeur correctes, plutôt que les valeurs 0.

J'espère que cela t'aides!

9
WongKongPhooey

Comment cela devrait-il être corrigé:

Vous devez avoir à initialiser la carte après que le conteneur (où vous placez la carte) soit visible,

Par exemple, j'ai plusieurs onglets et le dernier onglet contient la carte, J'ai résolu le problème en:

$('#map-tab').click(function() {
    // init map
});

Ici, je me suis d'abord assuré que le conteneur obtenait de la visibilité (lorsque cliquer sur cet élément pour révéler la section contenant la carte) puis initialiser la carte

CA marchait bien pour moi;

0
APu

Si vous utilisez des aides à la présentation basées sur JavaScript (tels que Foundation Equalizer ), vous devez vous assurer que le conteneur de cartes a la taille définitive avant de charger la carte, de sorte que vous n'obteniez pas la fameuse carte grise et certains attributs tels que center fonctionne comme prévu - ou utilisez les événements du plug-in tiers pour déclencher un rappel personnalisé qui corrige la carte. Par exemple.:

var map = new google.maps.Map(/*...*/);
$(document).on("after-height-change.fndtn.equalizer", function(){
    google.maps.event.trigger(map, 'resize');
});
0
Álvaro González

Ma carte était cachée dans un onglet Twitter Bootstrap et n'était donc pas visible lors de l'initialisation de la carte. J'avais donc besoin d'appeler le redimensionnement lorsque l'onglet était sélectionné comme suit:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {                 
    google.maps.event.trigger(map, 'resize');
})
0
Matthew