GoogleMapsAPIで位置情報を別ファイル(JSON)データに分ける
GoogleMapで位置情報と情報ウィンドウの内容が入ったJSONデータに連動してマーカーをクリックすると情報ウィンドウが表示され、コンテンツ表示させるものを作成しているのですが作ったコードではマーカーが消滅しています。javascript内に位置情報を配列として入力したものは正しく動きました。ご教授お願いいたします。
javascript内に配列を入れたもの
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<link rel="stylesheet"href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<script>
var currentWindow = null ;
function initialize() {
var bodyHeight = $('body').height();
$("#map").css('height',bodyHeight);
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(35.6954806, 139.76325010000005),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),myOptions);
var markers = [
['TAM 東京', 35.6954806, 139.76325010000005,'コメントA'],
['小川町駅', 35.6951212, 139.76610649999998,'コメントB'],
['淡路町駅', 35.69496, 139.76746000000003,'コメントC'],
['御茶ノ水駅', 35.6993529, 139.76526949999993,'コメントD'],
['神保町駅', 35.695932, 139.75762699999996,'コメントE'],
['新御茶ノ水駅', 35.696932, 139.76543200000003,'コメントF']
];
for (var i = 0; i < markers.length; i++) {
var name = markers[i][0];
var latlng = new google.maps.LatLng(markers[i][1],markers[i][2]);
var comment = markers[i][3];
createMarker(name, latlng, comment, map);
}
}
function createMarker(name, latlng, comment, map) {
var infoWindow = new google.maps.InfoWindow({
});
var marker = new google.maps.Marker({
position: latlng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
if (currentWindow) {
currentWindow.close();
}
infoWindow.setContent(
'<div class="infoWindow">'+
'<h2>'+name+'</h2>'+
'<p>'+comment+'</p>'+
'</div>'
);
infoWindow.open(map, marker);
currentWindow = infoWindow;
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize()">
<div data-role="page" id="top">
<div data-role="header">
<h1>DEMO</h1>
</div>
<div role="main" class="ui-content">
<a href="#sub" data-rel="dialog" data-transition="slidedown">ダイアログを表示 »</a>
<div id="map"></div>
</div>
<div data-role="footer">
<h1>DEMO</h1>
</div>
</div>
<div data-role="page" id="sub" data-close-btn="right">
<div data-role="header">
<h1>タイトル</h1>
</div>
<div data-role="main" class="ui-content">
<p>コメントはここから始まります</p>
<a href="#" data-role="button" data-rel="back">閉じる</a>
</div>
</div>
</body>
<style type="text/css">
#map {
width: 100%;
height: auto;
}
#infoWindow{
width: 300px;
height: 400px;
}
</style>位置情報を別データ(JSON)に分けたコード
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<link rel="stylesheet"href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<script>
var currentWindow = null ;
$(function() {
$.getJSON("maps.json", function(markers){
var setno = markers.length;
var title = new Array();
var lat = new Array();
var lng = new Array();
var text = new Array();
for (var i = 0; i < markers.length; i++) {
title[i] = markers[i][0];
lat[i] = markers[i][1];
lng[i] = markers[i][2];
text[i] = markers[i][3];
}
initialize(setno, title, lat, lng, text);
});
});
function initialize(setno, title, lat, lng, text) {
var bodyHeight = $('body').height();
$("#map").css('height',bodyHeight);
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(35.6954806, 139.76325010000005),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),myOptions);
for (var i = 0; i < markers.length; i++) {
var name = title[i];
var latlng = new google.maps.LatLng(lat[i],lng[i]);
var comment = text[i];
createMarker(name, latlng, comment, map);
}
}
function createMarker(name, latlng, comment, map) {
var infoWindow = new google.maps.InfoWindow({
});
var marker = new google.maps.Marker({
position: latlng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
if (currentWindow) {
currentWindow.close();
}
infoWindow.setContent(
'<div class="infoWindow">'+
'<h2>'+name+'</h2>'+
'<p>'+comment+'</p>'+
'</div>'
);
infoWindow.open(map, marker);
currentWindow = infoWindow;
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize()">
<div data-role="page" id="top">
<div data-role="header">
<h1>DEMO</h1>
</div>
<div role="main" class="ui-content">
<a href="#sub" data-rel="dialog" data-transition="slidedown">ダイアログを表示 »</a>
<div id="map"></div>
</div>
<div data-role="footer">
<h1>DEMO</h1>
</div>
</div>
<div data-role="page" id="sub" data-close-btn="right">
<div data-role="header">
<h1>タイトル</h1>
</div>
<div data-role="main" class="ui-content">
<p>コメントはここから始まります</p>
<a href="#" data-role="button" data-rel="back">閉じる</a>
</div>
</div>
</body>
<style type="text/css">
#map {
width: 100%;
height: auto;
}
#infoWindow{
width: 300px;
height: 400px;
}
</style>
maps.json
[
["TAM 東京", "35.6954806", "139.76325010000005","コメントA"],
["小川町駅", "35.6951212", "139.76610649999998","コメントB"],
["淡路町駅", "35.69496", "139.76746000000003","コメントC"],
["御茶ノ水駅", "35.6993529", "139.76526949999993","コメントD"],
["神保町駅", "35.695932", "139.75762699999996","コメントE"],
["新御茶ノ水駅", "35.696932", "139.76543200000003","コメントF"]
]