Google Map API v3 descentralizada se recarregada (não é o normal 'redimensionar')
Eu li todas as perguntas semelhantes, mas a minha é um pouco diferente. Na primeira vez que um diálogo do JQuery Mobile é exibido, o mapa carrega bem dentro da div map_canvas usual, mas se o diálogo for recarregado (por exemplo, volte e clique no botão para abrir o diálogo novamente), ele será exibido apenas parcialmente, com o zoom reduzido para 3 ou 4 e centralizado no canto superior esquerdo da div.
Não há alterações no tamanho da div (que é explicitamente definido) e, para uma boa medida, umgoogle.maps.event.trigger(map, 'resize');
é chamado
Eu também tentei inicializar o mapadepois d a caixa de diálogo é mostrada, mas o resultado é o mesm
Código do botão:
$("#dest-map-button").click(function() {
initializeMap(job_id,"map_canvas");
}
);
Função
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>
Alguma ideia
EDIT: esta pergunta parece descrever exatamente o mesmo problema:JQuery Mobile e falha no Google Maps Mas a solução fornecida (armazenamento em cache) não pode ser usada aqui, pois o mapa pode precisar ser alterado