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

Tout d'abord, merci de m'avoir guidé et d'avoir résolu ce problème. J'ai trouvé un moyen de résoudre ce problème grâce à vos discussions. Oui, venons-en au fait. Le problème est que j'utilise l'aide GoogleMapHelper v3 dans CakePHP3. Lorsque j'ai essayé d'ouvrir une popup modale bootstrap, j'ai été frappé par le problème de la boîte grise sur la carte. Il a été prolongé pendant 2 jours. Finalement, j'ai trouvé une solution à ce problème.

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

Il faut ajouter le script ci-dessous dans la fonction setCenterMap

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

Il faut inclure le code suivant dans le JavaScript

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

Answer 2

Bibliothèque javascript ResizeControl : phtagr.org : Contrôle de redimensionnement PResizeControl pour Google maps