phonegap jquery mobile google maps api display grau

Question

Ich suchte lange nach einer Lösung, aber ich fand keine Lösung.

Ich habe diese Lösungen versucht, aber keiner von ihnen funktioniert.

1. Google Karte Auslöser Größe ändern.
2. Umbruch div Höhe, Breite 100%. (Überlauf, Anzeige, Position alle Optionen)
3. Google Maps API Callback verwenden.

Aufnahme-Bild:

Meine CSS-Datei

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

Meine JavaScript

Datei

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

Meine HTML-Datei

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

Answer 1

Ich fand eine Lösung, die Google Maps Größe ändern, wenn die Seite mit Google Map Div-Tag zeigt.

Voraussetzung: Ihr Google-Karte in ondeviceready Funktion

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

und in meinem JS-Datei, auf meine Frage initialisieren, statt showContent()

$('#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); 
}); 

Auslöser Google Maps Größe ändern und setzen Zentrum. es läuft gut.

capture2

zusätzlich die Lösung Ärger zu schießen, um mehr Marker.

capture3