Google Maps on PhoneGap not showing Full

Question

I have a problem where my Google Maps is only showing top tiles (much like this issue PhoneGap + JQuery Mobile + Google Maps v3: map shows Top Left tiles?) but in iOS and with jQuery UI Map. However this only occurs after I play around with the app for some time switching tabs (it works fine on a Desktop Browser, only fails on the Device App)

I've tried several solutions from other posts (as you can see from the code) but my problem is a bit different, as it doesn't happen at first

Here is my HTML

<div data-role="page" id="page3" data-url="page3" tabindex="0" style="padding-bottom:19px">
....
    <div data-role="content" id="ct">
        <div id="map_canvas" style="height:100%"></div>
    </div>
....
</div>

And JS

$(document).bind('pagechange', function () {
if ($.mobile.activePage.attr('id') === 'page3') {

    if (!mapInited) {
        mapInited = true;
        $('#map_canvas').gmap().bind('init', function () {

            var bounds = new google.maps.LatLngBounds();
            navigator.geolocation.getCurrentPosition(locSuccess, locError);
            $.each(markers, function (i, marker) {
                var latlong = new google.maps.LatLng(marker.latitude, marker.longitude);
                bounds.extend(latlong);
                $('#map_canvas').gmap('addMarker', {
                    'position': latlong,
                    'bounds': true,
                    'primaryColor': "#0000FF",
                    'icon': './img/train.png'
                }).click(function () {
                    $('#map_canvas').gmap('openInfoWindow', {
                        'content': marker.content
                    }, this);
                });

            });
            $('#map_canvas').css('height', getRealContentHeight());
            $('#map_canvas').css('width', '100%');
            google.maps.event.trigger($('#map_canvas'), "resize");
            setTimeout(function () {
                google.maps.event.trigger($('#map_canvas'), 'resize');
            }, 500);
        });
    }
  }
 });
}

Thanks in advance for any thoughts

"Fixed" the issue with a very ugly work around Basically I recreate the Map everytime the page is loaded, like this

if (!mapInited)  mapInited = true;
else { $('#map_canvas').remove(); $('#ct').append('<div id="map_canvas" style="height:100%"></div>'); }

Answer 1

You trigger the resize-event for a jQuery-object, what will not have any effect, because you must trigger the event for the google.maps.Map-instance:

google.maps.event.trigger($('#map_canvas').gmap('get','map'),'resize');

You may also use the plugin-method triggerEvent to trigger the event:

 $('#map_canvas').gmap().triggerEvent('resize');

Answer 2

If you are using jquery-ui-map, why are you using the native google maps api instead of the gmap functions?

Why not call the $('#map_canvas').gmap('refresh');