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

J'ai un div 'mapwrap' réglé à 400px x 400px et à l'intérieur j'ai une 'map' Google réglée à 100% x 100%. La carte se charge donc à 400 x 400px, puis avec JavaScript, je redimensionne le `` mapwrap '' à 100% x 100% de l'écran - la carte google se redimensionne sur tout l'écran comme je m'y attendais 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 se réajuste à la div 'mapwrap' de plus grande taille?

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

METTRE À JOUR

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

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 de redimensionnement (vous devrez rechercher le mot «redimensionner»): http://code.google.com/apis/maps/documentation/v3/reference.html#event

Mettre à jour

Cette réponse est là depuis longtemps, donc une petite démo pourrait valoir la peine et bien qu'elle utilise jQuery, il n'y a pas vraiment besoin 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>

MISE À JOUR 22/05/2018

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

La documentation déclare

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

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

Voici une astuce qui assurait que la page était chargée et que la carte était également chargée. En définissant un écouteur et en écoutant l'état d'inactivité de la carte, vous pouvez ensuite 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.

La carte-dans-une-boîte de Wolfgang Pichler propose de

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

Il vaut mieux faire le travail accompli. Il redimensionnera votre carte. Plus besoin d'inspecter l'élément pour redimensionner votre carte. Ce qu'il fait, il 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 );

Tout d'abord, merci de m'avoir guidé et de clôturer ce numéro. J'ai trouvé un moyen de résoudre ce problème à partir de vos discussions. Ouais, venons au fait. Le fait est que j'utilise l'aide de GoogleMapHelper v3 dans CakePHP3. Lorsque j'ai essayé d'ouvrir la 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 eu une solution à ce problème.

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 d'inclusion ci-dessous en JavaScript

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