例−１０：JSON形式のデータを読み込んで、マッピングする
フォームのボタンを押すと、マーカーが追加されます。
マーカーをクリックすると、フォームで入力した文字が表示されます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Maps JavaScript API Example</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script src="http://maps.google.co.jp/maps?file=api&v=2&key=[あなたのAPIキー]&sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load(){
prettyPrint();
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.676148, 139.74479), 15);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
// JSON形式のファイルをダウンロードする
GDownloadUrl("./example_12.json", function(doc, stat){
//JSON形式はそのままJavaScriptオブジェクトとして扱える
eval("loaddata=" + doc);
//ループで地図上にマーカーを配置する
for (var i = 0; i < loaddata.data.length; i++) {
var marker = makeMarker(
loaddata.data[i].lat,
loaddata.data[i].lng,
loaddata.data[i].name
);
map.addOverlay(marker);
}
});
}
//マーカーを作成して返す
function makeMarker(lat, lng, name) {
var point = new GLatLng(lat, lng);
var marker = new GMarker(point);
// クリックしたマーカーに該当する情報を表示
GEvent.addListener(marker, "click", function(){
//マーカーにデータを保持させる方法
marker.openInfoWindowHtml(
"<b>"+name+"</b><br>" +
"lat:" + lat + "<br>" +
"lng:" + lng
);
});
return marker;
}
//ページがロードされたら、load 関数を実行して、地図を表示する
window.onload = load;
//ページを抜けるとき、メモリ開放
window.onunload = GUnload;
//]]>
</script>
</head>
<body >
<div id="map" style="width: 600px; height: 600px"></div>
</body>
</html>
取得するJSONファイル (example_12.json) (注)ファイルはUTF-8で保存してください
{
data: [
{lat:35.676148,lng:139.74479,name:"国会議事堂"},
{lat:35.678494,lng:139.744205,name:"国立図書館"}
]
}
