web-dev-qa-db-fra.com

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

J'ai un div "mapwrap" défini à 400px x 400px et à l'intérieur de celui-ci, une "carte" de Google définie à 100% x 100%. Ainsi, la carte se charge à 400 x 400 pixels, puis avec JavaScript, je redimensionne le "mapwrap" à 100% x 100% de l'écran. page.

Existe-t-il une fonction simple que je peux appeler pour que la carte Google se réajuste à la plus grande taille 'mapwrap'? 

javascriptcssgoogle-maps
105
Matthew James Taylor

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

METTRE À JOUR

L'API JavaScript Google Maps v2 est obsolète en 2011. Elle n'est plus disponible.

28
SingleNegationElimination

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

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

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

Mettre à jour 

Cette réponse a été ici longtemps, donc une petite démo pourrait en valoir la peine et bien que jQuery soit utilisé, il n’est pas vraiment nécessaire de le faire.

$(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>

UPDATE 2018-05-22

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

La documentation indique 

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

  • Le contrôle plein écran conserve maintenant le centre.

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

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

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

318
cmroanirgo

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

Voici une astuce qui assurait que la page avait été chargée et que la carte avait également été chargée. En définissant un écouteur et en écoutant l'état inactif de la carte, vous pouvez appeler le déclencheur d'événement pour le redimensionner.

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

C'était ma réponse qui a fonctionné pour moi.

8
italiansoda

Wolfgang Pichler's carte dans une boîte offre à

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

2
user177903

Ceci est préférable, il fera le travail effectué . Il redimensionnera votre carte. Plus besoin d'inspecter un élément pour redimensionner votre carte . Son action déclenchera automatiquement un é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 );
1
Divyanshu Rawat

Tout d’abord, merci de me guider et de clore ce numéro. J'ai trouvé un moyen de résoudre ce problème grâce à vos discussions. Oui, venons-en au point… .. Le problème, c'est que j'utilise GoogleMapHelper v3 helper dans CakePHP3. Lorsque j'ai essayé d'ouvrir une fenêtre contextuelle modale bootstrap, j'ai été frappé par le problème de la boîte grise sur la carte. Il a été prolongé de 2 jours. Enfin, j'ai un correctif à ce sujet.

Nous devons mettre à jour GoogleMapHelper pour résoudre le problème.

Besoin d'ajouter le script ci-dessous dans la fonction setCenterMap

google.maps.event.trigger({$id}, \"resize\");

Et besoin du code ci-dessous en JavaScript

google.maps.event.addListenerOnce({$id}, 'idle', function(){
   setCenterMap(new google.maps.LatLng({$this->defaultLatitude}, 
   {$this->defaultLongitude}));
});
0
user1933951