У меня проблема с отображением карты (API 3) в jQTouch. В браузере при первой загрузке он показывает только часть карты, но если я изменю размер окна, это нормально. Я пытаюсь использовать функцию google.maps.event.trigger(map_canvas, 'resize');, но не думаю, что помещаю ее в нужное место или что-то не так с моим кодом? Вся помощь будет высоко ценится.
<div id="locations">
<div class="toolbar">
<h1>Locations</h1>
<a class="back" href="#">Home</a>
</div>
<div id="map_canvas" style="width:100%;height:240px"></div>
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 11,
center: new google.maps.LatLng(50.451820688650656, -4.2572021484375),
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: false,
zoomControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
setMarkers(map, localities);
}
var localities = [
['Devonport', 50.370095229957016, -4.169440269470215, 3],
['John Bull Building', 50.41588787780982, -4.1097986698150635, 2],
['Portland Square', 50.375110980041484, -4.138498306274414, 1]
];
function setMarkers(map, locations) {
var image = new google.maps.MarkerImage('http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag.png',
new google.maps.Size(20, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var shadow = new google.maps.MarkerImage('http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag_shadow.png',
new google.maps.Size(37, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var location = locations[i];
var myLatLng = new google.maps.LatLng(location[1],location[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: location[0],
zIndex: location[3]
});
}
}
</script>
<?php
include( 'includes/bottom-nav.php' );
?>
</div>