Comment empêcher les vignettes Google Map de disparaître après le redimensionnement du conteneur ?

Redimensionner 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 a pour objectif d'apporter une solution à ce problème en abordant 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 qu'à chaque fois que la fenêtre est redimensionnée, la carte Google dans la "carte -canvas" div s'ajustera automatiquement à la nouvelle taille, empêchant les tuiles de disparaître.

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!