モバイルで地図が正しく表示されない（JQueryモバイルを使用）

Question

私はjQueryモバイルを使用しており、いくつかの地図を表示する必要があります。 私は特定のリンクをクリックするたびにマップを作成する関数を使用していますが、最初のマップの生成後に他のマップが間違って表示されます。ここで

たとえば、 最初のマップ：

他のマップ：

私はこのような機能を使用します。

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; 
} 

はあなたが助けることができますm e？

ありがとうございました！

Answer 1

解決される問題、あなたは "pageshowの" イベント（jQueryのモバイルのイベント）上のマップを作成する必要があります。

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

Answer 2

解決策は、resizeイベントをトリガーするか、Ajaxを使用しないことです。 Phillは、Ajaxを使用するjQuery Mobile Google maps plugin（$（ '＃map_canvas'）。gmap（ 'refresh'）; on pageloadを使用してどのように処理されたかの例をあなたに導いてくれました。 。グーグルマップ構文）