Centrer Google Maps (V3) sur le redimensionnement du navigateur (responsive)

Question

J'ai un Google Maps (V3) dans ma page à 100% de la largeur de la 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 (réactive). Maintenant, la carte reste à gauche de la page et devient plus petite.

MISE À JOUR J'ai réussi à le faire 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);
});

Answer 1

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

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

Answer 2

Détecte l'événement de redimensionnement du navigateur, redimensionne la carte Google Map 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 pour redimensionner la carte google map par d'autres moyens (par exemple, avec un contrôle "redimensionnable" de jQuery-UI).

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

Note : Ce code a été lié dans le commentaire de @smftre sur la réponse acceptée. Je pense qu'il vaut la peine de l'ajouter en tant que réponse propre car il est vraiment supérieur à la réponse acceptée. Il élimine le besoin d'une variable globale pour suivre le point central et d'un gestionnaire d'événement pour mettre à jour cette variable.

Answer 3

Quelques bons exemples sur w3schools.com. J'ai utilisé le suivant et il fonctionne très bien.

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

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

Answer 4

Html : Créez un div avec un id de votre choix

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

js : Créez une carte et attachez-la à la 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);
});

Answer 5

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

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

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