例−８：XMLファイルを読み込んで、地図上にマーカーをマッピングする その１
フォームのボタンを押すと、マーカーが追加されます。
マーカーをクリックすると、フォームで入力した文字が表示されます。
<!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[
//XMLからマーカーを作成して追加する
function addMarker_fromXML(map) {
//GXmlHttpクラス の インスタンスを作成
var request = GXmlHttp.create();
//getメソッドでサーバーからXMLを取得するように設定
request.open("GET", "./map_example_8.xml", true);
//ステート(状況)が変化したら呼ばれるので、読み込みが完了したら
//XMLを解析して、追加する
request.onreadystatechange = function() {
if (request.readyState == 4) {
//レスポンスをXMLとして取得
var xmlDoc = request.responseXML;
//markerノードを取得(複数あるので配列になる)
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
//一つずつマーカーにしていく
for (var i = 0; i < markers.length; i++) {
var mpoint = new GLatLng(
markers[i].getAttribute("lat"),
markers[i].getAttribute("lng")
);
var marker = createMarker(mpoint, i);
map.addOverlay(marker);
}
}
}
//リクエストの実行
request.send(null);
}
//マーカーを作る
function createMarker(mpoint, index) {
var icon = new GIcon();
icon.image = "http://googlemaps.googlermania.com/img/marker_flag.png";
icon.shadow = "http://googlemaps.googlermania.com/img/marker_shadow.png";
icon.iconSize = new GSize(35, 35);
icon.shadowSize = new GSize(35, 35);
icon.iconAnchor = new GPoint(0, 35);
icon.infoWindowAnchor = new GPoint(18, 11);
var marker = new GMarker(mpoint,icon);
return marker;
}
function load() {
var map = new GMap2( document.getElementById("map"));
map.setCenter( new GLatLng(35.684, 139.750), 12 );
//XMLを取得して、地図上にマーカーを追加する
addMarker_fromXML(map);
}
//ページがロードされたら、load 関数を実行して、地図を表示する
window.onload = load;
//ページを抜けるとき、メモリ開放
window.onunload = GUnload;
//]]>
</script>
</head>
<body >
<div id="map" style="width: 600px; height: 600px"></div>
</body>
</html>
取得するXML (map_example_8.xml)
<markers> <marker lat="35.65769724633269" lng="139.7019875049591" html="渋谷<br>G01 Shibuya" eki="渋谷"/> <marker lat="35.66515021658651" lng="139.7125232219696" html="表参道<br>G02 Omotesando" eki="表参道"/> <marker lat="35.67028408029107" lng="139.71755504608154" html="外苑前<br>G03 Gaien-mae" eki="外苑前"/> <marker lat="35.672768089361014" lng="139.7240674495697" html="青山一丁目<br>G04 Aoyama 1 chome" eki="青山一丁目"/> <marker lat="35.67769229985705" lng="139.73695278167725" html="赤坂見附<br>G05 Akasaka-mitsuke" eki="赤坂見附"/> <marker lat="35.67094649026828" lng="139.74302530288696" html="溜池山王<br>G06 Tameike-san-no" eki="溜池山王"/> <marker lat="35.67038867170557" lng="139.74941968917847" html="虎ノ門<br>G07 Toranomon" eki="虎ノ門"/> <marker lat="35.66751235787164" lng="139.75823879241943" html="新橋<br>G08 Shimbashi" eki="新橋"/> <marker lat="35.67122539808779" lng="139.76508378982544" html="銀座<br>G09 Ginza" eki="銀座"/> <marker lat="35.67619328033399" lng="139.76978302001953" html="京橋<br>G10 Kyobashi" eki="京橋"/> <marker lat="35.682529060368985" lng="139.7737205028534" html="日本橋<br>G11 Nihonbashi" eki="日本橋"/> <marker lat="35.68459439849937" lng="139.77461099624634" html="三越前<br>G12 Mitsukoshimae" eki="三越前"/> <marker lat="35.6931514745205" lng="139.77113485336304" html="神田<br>G13 Kanda" eki="神田"/> <marker lat="35.70293608902187" lng="139.77178931236267" html="末広町<br>G14 Suehirocho" eki="末広町"/> <marker lat="35.707980403351016" lng="139.77314114570618" html="上野広小路<br>G15 Ueno Hirokoji" eki="上野広小路"/> <marker lat="35.711708983201184" lng="139.77696061134338" html="上野<br>G16 Ueno" eki="上野"/> <marker lat="35.71123856451719" lng="139.78302240371704" html="稲荷町<br>G17 Inaricho" eki="稲荷町"/> <marker lat="35.70970532879391" lng="139.79127287864685" html="田原町<br>G18 Tawaracho" eki="田原町"/> <marker lat="35.70974888703399" lng="139.7970986366272" html="浅草<br>G19 Asakusa" eki="浅草"/> </markers>
