PhoneGap + JQuery Mobile + Google Maps v3: карта показывает верхние левые плитки?
У меня есть приложение PhoneGap, которое использует JQuery Mobile для навигации между страницами.
Когда я перехожу с главной страницы на страницу, содержащую карту Google, карта показывает только одну плитку за раз в верхнем левом углу, например:
В чем может быть причина этого?
**
Исходный код: Следующий скрипт находится в заголовке моей страницы
<script>
$(document).on("pageinit", "#stores", function () {
var centerLocation = new google.maps.LatLng('57.77828', '14.17200');
var myOptions = {
center: centerLocation,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
callback: function () { alert('callback'); }
};
map_element = document.getElementById("map_canvas");
map = new google.maps.Map(map_element, myOptions);
var mapwidth = $(window).width();
var mapheight = $(window).height();
$("#map_canvas").height(mapheight);
$("#map_canvas").width(mapwidth);
google.maps.event.trigger(map, 'resize');
});
</script>
Моя страница такая
<!-- Home -->
<div data-role="page" id="home">
.
.
.
</div>
<div data-role="page" id="stores">
<div data-role="content" id="map_canvas"></div>
</div>
Я перемещаюсь из дома на страницу карт следующим образом:
<a href="#stores">Stores</a>
Обновить после применения раствора Gajotres плитки становятся такими