Comment redimensionner une carte Google Map avec JavaScript après son chargement ?

Question

J'ai un div "mapwrap" dont les dimensions sont de 400px x 400px et à l'intérieur duquel je place une "carte" Google dont les dimensions sont de 100% x 100%. La carte se charge donc à 400 x 400px, puis, à l'aide de JavaScript, je redimensionne le div 'mapwrap' à 100% x 100% de l'écran - la carte Google se redimensionne à l'écran entier comme prévu, mais les tuiles commencent à disparaître avant le bord droit de la page.

Existe-t-il une fonction simple que je peux appeler pour que la carte Google s'adapte de nouveau à la division "mapwrap" de plus grande taille ?

Answer 1

Pour Google Maps v3, vous devez déclencher l'événement de redimensionnement différemment :

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

Consultez la documentation relative à l'événement de redimensionnement (vous devrez rechercher le mot "redimensionnement") : http://code.google.com/apis/maps/documentation/v3/reference.html#event

---

Mise à jour

Cette réponse est présente depuis longtemps, aussi une petite démonstration peut-elle être utile. Bien qu'elle utilise jQuery, ce n'est pas vraiment nécessaire.

$(function() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  var map = new google.maps.Map($("#map-canvas")[0], mapOptions);

  // listen for the window resize event & trigger Google Maps to update too
  $(window).resize(function() {
    // (the 'map' here is the result of the created 'var map = ...' above)
    google.maps.event.trigger(map, "resize");
  });
});

html,
body {
  height: 100%;
}
#map-canvas {
  min-width: 200px;
  width: 50%;
  min-height: 200px;
  height: 80%;
  border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&dummy=.js"></script>
Google Maps resize demo
<div id="map-canvas"></div>

MISE À JOUR 2018-05-22

Avec la nouvelle version du moteur de rendu dans la version 3.32 de l'API JavaScript de Maps, l'événement de redimensionnement ne fait plus partie de l'API. Map classe.

La documentation indique

Lorsque la carte est redimensionnée, le centre de la carte est fixe.

• Le contrôle plein écran préserve désormais le centre.

• Il n'est plus nécessaire de déclencher manuellement l'événement de redimensionnement.

source : https://developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize"); n'a pas d'effet à partir de la version 3.32

Answer 2

Si vous utilisez Google Maps v2, appelez checkResize() sur votre carte après avoir redimensionné le conteneur. lien

UPDATE

L'API JavaScript v2 de Google Maps a été supprimée en 2011. Elle n'est plus disponible.

Answer 3

La réponse populaire google.maps.event.trigger(map, "resize"); n'a pas fonctionné pour moi seul.

Voici une astuce qui permet de s'assurer que la page a été chargée et que la carte l'a été également. En configurant un écouteur et en écoutant l'état d'inactivité de la carte, vous pouvez ensuite appeler le déclencheur d'événement pour redimensionner.

$(document).ready(function() {
    google.maps.event.addListener(map, "idle", function(){
        google.maps.event.trigger(map, 'resize'); 
    });
}); 

C'est la réponse qui a fonctionné pour moi.

Answer 4

De Wolfgang Pichler map-in-a-box offre à

Chargez une carte dans un élément div déplaçable et redimensionnable.

Answer 5

C'est le meilleur, il fera le travail. Il redimensionnera votre carte. Il n'est plus nécessaire d'inspecter l'élément pour redimensionner votre carte. Ce qu'il fait, c'est déclencher automatiquement l'événement de redimensionnement.

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

        map_array[Next].setZoom( map.getZoom() - 1 );
    map_array[Next].setZoom( map.getZoom() + 1 );