phonegap jquery mobile google maps api display gray

Question

I was looking for solution for a long long time, but I didn't find a solution.

I tried these solutions, but none of them works.

1. Google map trigger resize.
2. change wrapping div height, width 100%.(overflow, display, position all options)
3. use Google maps API callback.

capture image:

My CSS file

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

My JavaScript file

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

My HTML file

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

Answer 1

I found a solution that google map trigger resize when the page containing google map div tag shows.

precondition: initialize your google map in ondeviceready function

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

and in my js file, on my question, instead of 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);
});

trigger google maps resize and set center. it works well.

capture2

in addition, the solution trouble shoot to multiple marker.

capture3