Google Map API v3 fuera del centro si se vuelve a cargar (no es la cosa habitual de 'cambio de tamaño')
Leí todas las preguntas similares, pero la mía es ligeramente diferente. La primera vez que se muestra un cuadro de diálogo de JQuery Mobile, el mapa se carga bien dentro del div map_canvas habitual, pero si el cuadro de diálogo se vuelve a cargar (es decir, retrocede y hace clic en el botón para abrir el cuadro de diálogo nuevamente), se muestra solo parcialmente, alejado a 3 o 4 y centrado alrededor de la esquina superior izquierda del div.
No hay cambio en el tamaño div (que se establece explícitamente) y, por si acaso, ungoogle.maps.event.trigger(map, 'resize');
se llama
Traté también de inicializar el mapadespué se muestra el cuadro de diálogo pero el resultado es el mismo.
Código de botón:
$("#dest-map-button").click(function() {
initializeMap(job_id,"map_canvas");
}
);
Función
function initializeMap(job_id, map_div){
var pos = arrJobs[job_id].lat_lng.split(',');
var job_pos = new google.maps.LatLng(pos[0],pos[1]);
var driverLatLng = lat_lng.split(',');
var driver_pos = new google.maps.LatLng(driverLatLng[0],driverLatLng[1]);
var myOptions = {
zoom: 18,
center: driver_pos,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
}
map = new google.maps.Map(document.getElementById(map_div), myOptions);
var marker = new google.maps.Marker({
position: job_pos,
map: map,
title: "Job"
});
var marker2 = new google.maps.Marker({
position: driver_pos,
map: map,
title: "X",
});
google.maps.event.trigger(map, 'resize');
}
HTML:
<div data-role="page" id="dialog-destination-map" data-theme="e">
<div data-role="content">
<div id="map_canvas" style="height:300px; width:300px; position: relative; margin: 0px auto;">
map_canvas
</div>
</div>
</div>
¿Algunas ideas
EDIT: esta pregunta parece describir exactamente el mismo problema:JQuery Mobile y Google Maps Glitch Pero la solución proporcionada (almacenamiento en caché) no se puede usar aquí, ya que el mapa puede necesitar cambiar