Redimensionnement d'une carte Google avec JavaScript

Vous avez rencontré un problème où les vignettes Google disparaissent après le redimensionnement d'un div "mapwrap" contenant un nom Google carte. Cet article vise à fournir une solution à ce problème en discutant de la fonction appropriée pour déclencher un ajustement de la carte Google.

Pourquoi les tuiles disparaissent-elles ?

Lorsque vous redimensionnez le " mapwrap" div, la carte Google ne s'ajuste pas automatiquement à la nouvelle taille. Cela entraîne une inadéquation entre les dimensions de la carte et la zone d'affichage, entraînant la disparition des tuiles.

Solution

Pour résoudre ce problème, vous devez déclencher explicitement l'événement de redimensionnement. sur l'objet Google Map. Cela demande à la carte de recalculer sa mise en page et de s'ajuster aux nouvelles dimensions du div "mapwrap".

Pour Google Maps v3, utilisez cette fonction :

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

Démonstration

Pour clarifier ce concept, voici une démonstration utilisant jQuery :

$(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 and trigger Google Maps to resize
  $(window).resize(function() {
    google.maps.event.trigger(map, "resize");
  });
});

Cet exemple garantit que chaque fois que la fenêtre est redimensionnée, la carte Google dans le div "map-canvas" s'ajustera automatiquement à la nouvelle taille, empêchant les tuiles de disparaître.