web-dev-qa-db-fra.com

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

J'ai une carte Google Maps (V3) à 100% de la largeur de la page, avec un marqueur au milieu. Lorsque je redimensionne la largeur de la fenêtre de mon navigateur, je souhaite que la carte reste centrée (responsive). Maintenant, la carte reste à gauche de la page et devient plus petite.

UPDATEObtenir pour qu'il fonctionne exactement comme décrit grâce à duncan. C'est 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);
});
javascriptgoogle-mapsgoogle-maps-api-3
121
Gregory Bolkenstijn

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

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

Détecter 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 lorsque vous redimensionnez la carte Google par d'autres moyens (par exemple, avec un contrôle 'redimensionnable' de jQuery-UI).

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

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

83
William Denniss

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

4
Steve Mulvihill

html: Créer une div avec un identifiant 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 se redimensionne

var center = map.getCenter();

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

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));
0
David Bradshaw