phonegap jquery mobile google maps apiディスプレイグレー

Question

私は長い間、ソリューションを探していましたが、解決策が見つかりませんでした。

私はこれらのソリューションを試しましたが、いずれも機能しませんでした。

1. Google map trigger resize。
2. 変更の折り返しdivの高さ、幅100％（オーバーフロー、表示、すべてのオプションの位置指定）
3. GoogleマップのAPIコールバックを使用します。

キャプチャ画像：

私のCSSファイル

.content_location{ 
    padding: 0; 
    padding-bottom: 50px; 
    margin: auto; 
    position: absolute !important; 
    right: 0 !important; 
    left: 0 !important; 
    width: 95%; 
    height: 35vh; 
    overflow: visible; 
} 
#content_location{ 
    width: 100%; 
    height: 100%; 
    overflow: visible; 
} 

私JavaScriptがファイル

function showContent(index){ 
    ... 
    var lat= goodslist[index]['latitude']; 
    var lng= goodslist[index]['longitude']; 
    var currentmapposition= new google.maps.LatLng(lat, lng); 
    var mapoptions= { 
     center: currentmapposition, 
     zoom: 16, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var infowindow= new google.maps.InfoWindow(); 
    var latlngbounds= new google.maps.LatLngBounds(); 

    if(!map){ 
     map= new google.maps.Map(document.getElementById('content_location'), mapoptions); 
    } 
    else{ 
     map.setOptions(mapoptions); 
    } 

    if(marker) marker.setMap(null); 
    var tmpmarker = new google.maps.Marker({ 
     position: currentmapposition, 
     map: map 
    }); 
    marker= tmpmarker; 

    google.maps.event.addListener(marker, 'click', (function(marker){ 
     return function(){ 
      infowindow.setContent(goodslist[index]['goodsname'] + ' : ' + goodslist[index]['address']); 
      infowindow.open(map, marker); 
     } 
    })(marker)); 
    google.maps.event.trigger(map,'resize'); 
    $('#content_location').trigger('create'); 
} 

私のHTMLファイル

<div class="content_location"> 
    <div id="content_location"></div> 
</div> 

Answer 1

グーグルマップのdivタグが含まれているページが表示されたときに、Googleマップのトリガーのサイズが変更されるという解決策が見つかりました。

前提条件：代わりに

$('#content_page').on('pageshow', function(){ 
    var lat= goodslist[goodsindex]['latitude']; 
    var lng= goodslist[goodsindex]['longitude']; 
    var latlng= new google.maps.LatLng(lat,lng); 
    google.maps.event.trigger(map, 'resize'); 
    map.setCenter(latlng); 
}); 

トリガーGoogleマップは、サイズを変更し、設定センター（）showContentの、私の質問に、ondeviceready機能

function onDeviceReady(){ 
    ... 
    map= new google.maps.Map(document.getElementById('content_location'),{ 
     center: new google.maps.LatLng(37.552898, 126.981002), 
     zoom: 15, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
} 

で、私のjsファイルでGoogleマップを初期化します。それはうまくいく。加えて

capture2

、複数のマーカーに対する解決策のトラブルシュート。

capture3