javascript - script - marcar puntos en google maps api

Volver a centrar un mapa de Google después de que el contenedor haya cambiado de ancho

Question

Tengo un mapa de google configurado con Javascript API V3. Se muestra en un div con un ancho dinámico, ya que un panel de contenido se desliza hacia arriba cuando hacemos clic en un marcador.

Todo funciona bien, pero una cosa: cuando el panel se desliza hacia arriba, el ancho del mapa cambia, por lo que el centro se desplaza hacia la derecha (el panel está a la izquierda). Es realmente inconveniente especialmente para resoluciones pequeñas, donde ni siquiera puede ver el centro después de que el panel está abierto.

Probé el disparador de ''cambio de tamaño'', pero parece que no funciona ... ¿Alguna idea?

Muchas gracias !

Answer 1

Hy allí prueba esto;)

En la inicialización del mapa

var currentMapCenter = null; 
google.maps.event.addListener(map, ''resize'', function () {
    currentMapCenter = map.getCenter();
});

google.maps.event.addListener(map, ''bounds_changed'', function () {
    if (currentMapCenter) {
    // react here
        map.setCenter(currentMapCenter);
    }
    currentMapCenter = null;
});

Después de esto solo llame cuando quiera cambiar el tamaño del mapa.

google.maps.event.trigger(map, ''resize'');

Answer 2

Primero configure una variable para el centro actual, luego use un detector de eventos para detectar un cambio de tamaño, y así establecer el centro.

//Get current center
var getCen = map.getCenter();

//Use event listener for resize on window
google.maps.event.addDomListener(window, ''resize'', function() {
   //Set Center
   map.setCenter(getCen);
});

Answer 3

omarello funciona, pero no puedo dejar de votarlo. Probablemente se olvidó de referirse a la var que define las coordenadas de su centro. Todo lo que "resize" hace es tirar de la anchura y altura actual de los divs, ¡sin embargo, no cambia nada en el mapa!

var center = new google.maps.LatLng(39.5, -98.3);

$(document).ready(function() { 
    $("#fullsize").click(function(e) { 
        e.preventDefault();
        $("#map_canvas").css({ 
            width: ''1000px''});
        google.maps.event.trigger(map, "resize"); 
        map.setCenter(center);
        }); 
    });

Answer 4

Llamar para resize por sí solo no logrará lo que necesita.

Lo que debe hacer es primero (antes de que se cambie el tamaño) obtener el centro actual del mapa

var currCenter = map.getCenter();

Luego debe hacer algo como lo siguiente, después de cambiar el tamaño de su div.

google.maps.event.trigger(map, ''resize'');
map.setCenter(currCenter);

Debería hacer el truco

ACTUALIZACIÓN 2018-05-22

Con un nuevo lanzamiento de renderizador en la versión 3.32 de Maps JavaScript API, el evento resize ya no forma parte de la clase Map .

La documentación indica

Cuando se cambia el tamaño del mapa, el centro del mapa se repara

• El control de pantalla completa ahora conserva el centro.

• Ya no es necesario activar el evento de cambio de tamaño manualmente.

fuente: https://developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize"); no tiene ningún efecto a partir de la versión 3.32