jquery - ejemplos - ¿Cómo fuerzo a volver a dibujar con Google Maps API v3.0?

jquery animate transform

Question

Tengo una aplicación de mapas bastante sofisticada que maneja múltiples marcadores personalizados y tal. Tengo una función llamada resizeWindow que llamo en un oyente para que cada vez que se cambie la pantalla, el mapa se rediseñe calculando nuevos límites y forzando un cambio de tamaño. Se parece a esto:

window.onresize = function(event) { fitmap(); };

y la función para cambiar el tamaño es:

function fitmap(id) {
    var coords = [];
    var newlatlng = new google.maps.LatLng(projlat, projlng);
    coords.push(newlatlng);

        for (var i=0; i<markers[id].length; i++) {
            newlatlng = new google.maps.LatLng(markers[id][i].latitude, markers[id][i].longitude);
            coords.push(newlatlng);
        }
    }   

    var bounds = new google.maps.LatLngBounds ();
    for (var i = 0, LtLgLen = coords.length; i < LtLgLen; i++) {
        bounds.extend (coords[i]);
    }
    map.fitBounds(bounds);

y esto funciona muy bien cuando realmente cambio el tamaño de la ventana. Pero...

Tengo un menú que baja por el lado derecho de la ventana. Yo uso jquery.animate para mover ese menú fuera de la pantalla. Llamo a la función de mapa de ajuste como un proceso de paso (o solo una vez al final) y no volverá a dibujar el mapa.

$(''#rightSide'').animate({ right:"-240px" }, { 
    duration:1000, 
    step: function(now,fx) {
        fitmap();
    } 
});

He leído y leído sobre esto y parece que hay una rareza de Google Maps API v3.0 que no volverá a dibujarse si realmente no cambia nada. En este caso, mi ventana disponible cambia de ancho de pantalla - menú a pantalla completa real. Pero no vuelve a dibujarse.

Probé google.maps.event.trigger (map, ''resize''); y eso tampoco funciona

¿Hay alguna manera de forzar absolutamente a Google Maps a volver a dibujar?

Answer 1

google.maps.event.trigger(MapInstance,''resize'') está funcionando bien para mí, fitMap al comienzo de la función fitMap .

Lo que te estás perdiendo:

actualmente (no en el código publicado arriba, en su código en vivo), usted llama a resizeWindow en cada step .

Cuando llama a esta función en el step , se llamará a la función antes de que la animación del paso actual haya finalizado. El resultado es que no se llamará a resizeWindow cuando la animación completa haya finalizado, por ejemplo, habrá un margen en el lado derecho del mapa.

Solución: llame a resizeWindow también en la devolución complete de la animation .