Centrer Google Maps (V3) sur le redimensionnement du navigateur (réactif)

124

J'ai un Google Maps (V3) dans ma page à 100% de largeur de page avec un marqueur au milieu. Lorsque je redimensionne la largeur de la fenêtre de mon navigateur, j'aimerais que la carte reste centrée (responsive). Maintenant, la carte reste simplement sur le côté gauche de la page et devient plus petite.

MISE À JOUR Je l'ai fait fonctionner exactement comme décrit grâce à duncan. Voici le code final:

var center;
function calculateCenter() {
  center = map.getCenter();
}
google.maps.event.addDomListener(map, 'idle', function() {
  calculateCenter();
});
google.maps.event.addDomListener(window, 'resize', function() {
  map.setCenter(center);
});

javascript google-maps google-maps-api-3

— Gregory Bolkenstijn
source

1

bon travail! oui, vous devez afficher en continu la valeur centrale actuelle dans la portée globale afin qu'elle puisse être captée par l'auditeur dom

— efwjames

Si vous allez au sommet, faites-le de cette façon, alors il centern'est pas nécessaire d'être mondial. Fournir center(et calculateCenter) sont dans la même portée que map, alors tout devrait fonctionner. Bien sûr, si mapc'est global, vous devrez également résoudre ce problème :)

— Roamer-1888

C'est peut-être évident pour la plupart, mais ce code vient APRÈS le chargement de la carte, il devrait donc être au moins sur windows.onload

— Victoria Ruiz

merci, cela devrait être le beaviours google maps par défaut

— Yukulélé

143

Vous devez disposer d'un écouteur d'événements pour le redimensionnement de la fenêtre. Cela a fonctionné pour moi (mettez-le dans votre fonction d'initialisation):

google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(center);
});

— Duncan
source

Cela fonctionne parfaitement, merci! Mais si quelqu'un a déplacé la carte, comment obtenir le nouveau centre de la carte? J'ai trouvé la fonction getCenter (), mais je n'arrive pas à la faire fonctionner correctement. map.setCenter (map.getCenter ()); ne fonctionne pas.

— Gregory Bolkenstijn

Vous voulez un autre écouteur d'événement, je pense pour "center_changed" sur l'objet de la carte, qui met à jour une variable globale avec les nouvelles coordonnées, que vous pouvez ensuite utiliser dans votre setCenter.

— duncan

1

J'ai essayé ça aussi:

var center; google.maps.event.addListener(map, 'center_changed', function() {   center = map.getCenter(); }); google.maps.event.addDomListener(window, 'resize', function() {   map.setCenter(center); });

ça ne marche pas. Toute aide serait appréciée.

— Gregory Bolkenstijn

Que diriez-vous de "bounds_changed" à la place?

— duncan

49

C'est le moyen le plus simple: hsmoore.com/blog/…

— AO_

83

Détecte l'événement de redimensionnement du navigateur, redimensionne la carte Google tout en préservant le point central:

var map = ...; // your map initialisation code

google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center); 
});

Vous pouvez utiliser le même code dans d'autres gestionnaires d'événements lors du redimensionnement de la carte google par d'autres moyens (par exemple avec un contrôle «redimensionnable» jQuery-UI).

Source: http://hsmoore.com/blog/keep-google-map-v3-centered-when-browser-is-resized/ crédit à @smftre pour le lien.

Remarque: Ce code était lié au commentaire de @ smftre sur la réponse acceptée. Je pense que cela vaut la peine de l'ajouter comme sa propre réponse car elle est vraiment supérieure à la réponse acceptée. Il élimine le besoin d'une variable globale pour suivre le point central et d'un gestionnaire d'événements pour mettre à jour cette variable.

— William Denniss
source

D'accord avec @William, cette méthode permet d'obtenir une position centrale plus précise lorsque la carte est redimensionnée.

— dixième étage

La réponse acceptée ne fonctionnait pas correctement, celle-ci a fait l'affaire

— Tom

C'est la meilleure solution qui fonctionne. Fonctionne sur chaque événement de redimensionnement des fenêtres. D'autres solutions ne fonctionnaient pas correctement.

— zdarsky.peter

1

Cela aurait vraiment dû être publié en tant que wiki de la communauté.

— gustavohenke

Cela fonctionne, mais j'aimerais mieux le comprendre. Que fait exactement google.maps.event.trigger(map, "resize");?

— meduz '26

4

Quelques bons exemples sur w3schools.com. J'ai utilisé ce qui suit et cela fonctionne très bien.

google.maps.event.addDomListener(window, 'resize', function() {
  map.panTo(myLatlng);
});

http://www.w3schools.com/googleapi/google_maps_events.asp

— Steve Mulvihill
source

0

html: créez un div avec un identifiant de votre choix

<div id="map"></div>

js: créez une carte et attachez-la au div que vous venez de créer

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: new google.maps.LatLng(-33.890542, 151.274856)
});

Centrer lorsque la fenêtre est redimensionnée

var center = map.getCenter();

google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(center);
});

— drjorgepolanco
source

0

Mise à jour de la solution ci-dessus vers es6.

let center;
const addMapListener = google.maps.event.addDomListener;

addMapListener(map, 'idle', () => center = map.getCenter());
addMapListener(window, 'resize', () => map.setCenter(center));

— David Bradshaw
source

Vous utilisez à la addDomListenerfois le window, qui est un élément DOM, et le map, qui ne l'est pas. L'objet map doit utiliser le google.maps.event.addListenerou son propre map.addListenergestionnaire d'événements.

— duncan