Карты Google на PhoneGap не отображаются полностью

Question

У меня проблема с тем, что в моих Картах Google отображаются только верхние листы (очень похоже на эту проблему PhoneGap + JQuery Mobile + Google Maps v3: карта показывает верхние левые листы?), Но в iOS и с картой jQuery UI Map. Однако это происходит только после того, как я поигрался с приложением в течение некоторого времени, переключая вкладки (он отлично работает в браузере рабочего стола, не работает только в приложении устройства)

Я пробовал несколько решений из других постов (как вы можете видеть из кода), но моя проблема немного отличается, так как сначала это не происходит

Вот мой 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>

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

Заранее спасибо за любые мысли

"Исправлена" проблема с очень некрасивым обходом. В основном я воссоздаю карту каждый раз, когда страница загружается, вот так

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

Answer 1

Если вы используете jquery-ui-map, почему вы используете нативный API Google Maps вместо функций gmap?

Почему бы не позвонить $('#map_canvas').gmap('refresh');

Answer 2

Вы запускаете событие resize для объекта jQuery, что не будет иметь никакого эффекта, потому что вы должны вызвать событие для google.maps.Map-пример:

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

Вы также можете использовать плагин-метод triggerEvent чтобы вызвать событие:

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