Я прочитал все подобные вопросы, но мой немного отличается. При первом отображении диалогового окна JQuery Mobile карта загружается нормально внутри обычного div map_canvas, но если диалоговое окно перезагружается (т. Е. Вернитесь назад и нажмите кнопку, чтобы снова открыть диалоговое окно), оно отображается только частично, уменьшено до 3 или 4 и вокруг верхнего левого угла div.

Нет изменений в размере div (который установлен явно) и для хорошейgoogle.maps.event.trigger(map, 'resize'); называется.

Я также попытался инициализировать картупосле диалоговое окно отображается, но результат тот же.

Код кнопки:

$("#dest-map-button").click(function() {
            initializeMap(job_id,"map_canvas");
        }
);

Функция:

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>

Есть идеи?

РЕДАКТИРОВАТЬ: этот вопрос, кажется, описывает точно такую же проблему:JQuery для мобильных устройств и Google Maps Glitch Но предоставленное решение (кэширование) не может быть использовано здесь, так как карта может потребоваться изменить