карты отображаются неправильно на мобильном телефоне (с использованием JQuery Mobile)

Question

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

Вот пример, Первая карта:

Другие карты:

Я использую такую ​​функцию:

function buildMap(div){

    var coord = new google.maps.LatLng(lat, lng);

    var options = {
        zoom: 13,
        scrollwheel: false,
        scaleControl: true,
        mapTypeControl: false,
        center: coord,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };

    var map = new google.maps.Map(div, options);

    return map;
}

Можете ли вы мне помочь?

Спасибо !!

Answer 1

Проблема решена, вам нужно создать карту по событию "pageshow" (событие из jQuery mobile):

$('#map_page').live('pageshow',function(event, ui){
    buildResultMap('#map_canvas');
});

Answer 2

Решение состоит в том, чтобы вызвать событие изменения размера ИЛИ не использовать Ajax. Фил привел вам пример того, как это делается с помощью jQuery Mobile для карт Google Maps , который использует Ajax (и вызывает $ ('# map_canvas'). Gmap ('refresh'); при загрузке страницы. Плагин очень прост в использовании (особенно если вы уже знаете синтаксис карт Google).