Centro 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 que 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

Necesita tener un detector de eventos para cuando la ventana cambie de tamaño. Esto funcionó para mí (lo puso en su función de inicialización):

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

Answer 2

Detectar el navegador redimensionar caso, cambia el tamaño del mapa de Google preservando al mismo tiempo 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); 
}); 

Usted puede utilizar el mismo código en otros manejadores de eventos al cambiar el tamaño del mapa de google por otros medios (por ejemplo, con un control jQuery-UI 'resizable').

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

Nota: Este código fue enlazado 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 3

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 4

html: Crear un div con un id de su elección

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

JS: Crear un mapa y adjuntarlo a la div que acaba de crear

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

Centro cuando la ventana cambia de tamaño

var center = map.getCenter(); 

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

Answer 5

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