Comment redimensionner dynamiquement une carte Google Map à l'aide de JavaScript ?

Redimensionnement dynamique d'une carte Google avec JavaScript

Lors du redimensionnement dynamique d'un élément Google Maps, il est crucial de déclencher l'événement de redimensionnement pour garantir que la carte s'ajuste aux nouvelles dimensions.

Pour Google Maps v3

<code class="javascript">google.maps.event.trigger(map, "resize");</code>

Pour l'API Google Maps

Pour Google Maps API, vous pouvez utiliser le code JavaScript suivant pour déclencher l'événement de redimensionnement :

<code class="javascript">function resizeMap() {
  google.maps.event.trigger(map, "resize");
}</code>

Vous pouvez ensuite appeler resizeMap() pour ajuster la carte aux dimensions mises à jour du conteneur.

Remarques supplémentaires :

• L'événement de redimensionnement doit être déclenché une fois les nouvelles dimensions définies.
• L'utilisation d'un écouteur de redimensionnement de fenêtre peut garantir que la carte répond aux changements dans taille de la fenêtre du navigateur.

Exemple :

<code class="html"><script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-container">
  <div id="map"></div>
</div>
<script>
  function resizeMap() {
    google.maps.event.trigger(map, "resize");
  }
  $(window).resize(resizeMap);

  var map = new google.maps.Map(document.getElementById("map"), {});
</script></code>

En suivant ces étapes, vous pouvez vous assurer que votre carte Google Maps s'ajuste dynamiquement à tout changement dans son conteneur. taille.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!