style - popup google map javascript

Centre Google Maps(V3) en el tamaño del navegador(sensible)

Question

Tengo un Google Maps (V3) en mi página al 100% de ancho de página 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 simplemente se queda en el lado izquierdo de la página y se hace más pequeño.

ACTUALIZACIÓN Lo tengo para trabajar 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);
});

Answer 1

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));

Answer 2

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

Answer 3

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 manejadores de eventos al redimensionar el mapa de google por otros medios (por ejemplo, con un control jQuery-UI ''resizable'').

Fuente: hsmoore.com/blog/… crédito a @smftre para el enlace.

Nota: Este código fue 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 manejador de eventos para actualizar esa variable.

Answer 4

Necesita tener un detector de eventos para cuando la ventana cambie 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);
});

Answer 5

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);
});