Centre Google Maps (V3) en el cambio de tamaño del navegador (receptivo)

124

Tengo un Google Maps (V3) en mi página con un ancho de página del 100% con un marcador en el medio. Cuando cambio el tamaño del ancho de la ventana de mi navegador, me gustaría que el mapa permanezca centrado (receptivo). Ahora el mapa solo se queda en el lado izquierdo de la página y se vuelve más pequeño.

ACTUALIZACIÓN Lo hice funcionar exactamente como se describe gracias a Duncan. Este es el código 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
fuente

1

¡buen trabajo! sí, debe emitir continuamente el valor central actual al alcance global para que pueda ser recogido por el oyente dom

— efwjames

Si va a hacerlo, hágalo de esta manera, entonces centerno necesita ser global. Proporcionar center(y calculateCenter) está en el mismo alcance que map, entonces todo debería funcionar. Por supuesto, si mapes global, entonces también tendrá que arreglar eso :)

— Roamer-1888

Tal vez sea obvio para la mayoría, pero este código se produce después se carga el mapa, por lo que debe ser al menos de windows.onload

— Victoria Ruiz

gracias, este debería ser el comportamiento predeterminado de Google Maps

— Yukulélé

143

Debe tener un detector de eventos para cuando la ventana cambia de tamaño. Esto funcionó para mí (póngalo en su función de inicialización):

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

— Duncan
fuente

Esto funciona perfecto, gracias! Pero si alguien ha movido el mapa, ¿cómo obtengo el nuevo centro del mapa? Encontré la función getCenter (), pero no puedo hacer que funcione correctamente. map.setCenter (map.getCenter ()); no funciona

— Gregory Bolkenstijn

Desea otro detector de eventos, creo que para "center_changed" en el objeto del mapa, que actualiza una variable global con las nuevas coordenadas, que luego puede usar en su setCenter.

— Duncan

1

Intenté eso también:

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

no funciona. Cualquier ayuda sería apreciada.

— Gregory Bolkenstijn

¿Qué tal "límites_cambiados" en su lugar?

— Duncan

49

Esta es la forma más fácil: hsmoore.com/blog/…

— AO_

83

Detecta el evento de cambio de tamaño del navegador, cambia el tamaño del mapa de Google y conserva el punto 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); 
});

Puede usar el mismo código en otros controladores de eventos al cambiar el tamaño del mapa de Google a través de otros medios (por ejemplo, con un control 'redimensionable' jQuery-UI).

Fuente: http://hsmoore.com/blog/keep-google-map-v3-centered-when-browser-is-resized/ crédito a @smftre por el enlace.

Nota: Este código estaba vinculado en el comentario de @ smftre sobre la respuesta aceptada. Creo que vale la pena agregarlo como su propia respuesta, ya que es realmente superior a la respuesta aceptada. Elimina la necesidad de una variable global para rastrear el punto central y un controlador de eventos para actualizar esa variable.

— William Denniss
fuente

De acuerdo con @William, este método da como resultado una posición central más precisa cuando se cambia el tamaño del mapa.

— décimo piso

la respuesta aceptada no funcionaba correctamente, esta hizo el truco

— Tom

Esta es la mejor solución y funciona. Funciona en todos los eventos de cambio de tamaño de Windows. Otras soluciones no funcionaron correctamente.

— zdarsky.peter

1

Esto realmente debería haberse publicado como wiki de la comunidad.

— gustavohenke

Funciona, pero me gustaría entenderlo más. ¿Qué hace exactamente google.maps.event.trigger(map, "resize");?

— Meduz '

4

Algunos buenos ejemplos en w3schools.com. Usé lo siguiente y funciona muy bien.

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

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

— Steve Mulvihill
fuente

0

html: crea un div con una identificación de tu elección

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

js: crea un mapa y adjúntalo al div que acabas de crear

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

Centrar cuando la ventana cambia de tamaño

var center = map.getCenter();

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

— drjorgepolanco
fuente

0

Actualización de la solución anterior a es6.

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

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

— David Bradshaw
fuente

Estás utilizando addDomListenertanto para el window, que es un elemento DOM como para el map, que no lo es. El objeto de mapa debe usar el google.maps.event.addListenero su propio map.addListenercontrolador de eventos.

— Duncan