jquery モバイルで Google マップを読み込めませんでした。読み込みますが、ブラウザで更新を押したときのみです。現在、jquery.mobile 1.3.1 と jquery 1.9.1 を使用しています。私はこれをすべて学んでいるので、これを行う方法がわかりません。
function initialize() {
//add map, the type of map
var map = new google.maps.Map(document.getElementById('outage_map'), {
zoom: 9,
center: new google.maps.LatLng(37.7749295, -122.4194155),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var $map = $('#outage_map');
$map.height( $(window).height(200) - $map.offset().top );
//declare marker call it 'i'
var marker, i;
//declare infowindow
var infowindow = new google.maps.InfoWindow({
maxWidth: 250,
});
//add locations
var locations = [
['San Francisco: Power Outage <br> Reported: 9:00am <br> Estimated Restore Time: 12:00pm', 37.789241, -122.41073, 'images/electric.png'],
['San Francisco: Power Outage <br> Reported: 9:00am <br> Estimated Restore Time: 12:00pm', 37.806992, -122.41051, 'images/electric.png'],
['San Francisco: Gas Interruption <br> Reported: 9:30am <br> Estimated Restore Time: 12:00am', 37.789241, -122.41073, 'images/gas.png'],
['San Francisco: Planned Maintenance <br> Time: 9:00am to 2:30pm ', 37.784748, -122.468982, 'images/maintenance.png'],
['Shingletown: Power Outage <br> Reported: 9:00am <br> Estimated Restore Time: 12:00pm', 40.4923784, -121.8891586, 'images/electric.png'],
['San Mateo: Maintenance <br> Time: 10:00am to 12:00pm', 37.5629917, -122.3255254, 'images/maintenance.png'],
['Concord: Power Outage <br> Reported: 11:10pm <br> Estimated Restore Time: 4:00am', 37.9779776, -122.0310733, 'images/electric.png'],
['Hayward: Power Outage <br> Reported: 11:10pm <br> Estimated Restore Time: 4:00am', 37.6688205, -122.0807964, 'images/electric.png'],
['Alameda: Maintenance <br> Time: 9:00am to 3:30pm', 37.7652065, -122.2416355, 'images/maintenance.png'],
];
//add marker to each locations
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: locations[i][3]
});
//click function to marker, pops up infowindow
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
マップは「ページ」と呼ばれる別のコンテナ内にあります
<div class="page" data-role="page" id="map_main">
<!-- navagation -->
<div data-theme="a" data-role="header" data-position="fixed">
<a data-role="button" data-direction="reverse" data-transition="slide"
href="index copy.html" data-icon="arrow-l" data-iconpos="left" class="ui-btn-left">
Main
</a>
<h3>
Outage Map
</h3>
</div>
<!-- navagation -->
<!-- Map -->
<div class="map_image" id="outage_map"></div>
<!-- Map -->