XMLファイルを読み込んでGoogle Mapsを表示

スポンサードリンク

Posted by 管理人 on 2010年5月20日 Leave a comment (0) Go to comments

とても便利なXMLファイル、マーカー情報をまとめて書いてダウンロードして、Google Maps で表示させましょう。

◆用意するのは

XMLファイル（UTF8で記述）
Script記述
HTMLだけ

◆XML記述

<markers>

<marker lat=”37.427770″ lng=”-122.144841″/>

<marker lat=”37.433480″ lng=”-122.139062″/>

<marker lat=”37.445427″ lng=”-122.162307″/>

</markers>

実際に使っているXMLファイルはコチラだけど・・・・・、lat、lagデータだけあればOK。

◆HTML

bodyタグは｢次のように

<body onload=”initialize()” onunload=”GUnload()”>

地図を表示させるのは

<div id=”map_canvas”>Loading…</div>

◆Script記述

<header>なかでも、<body>～</body>のどこでもOK

<script type=”text/javascript”>

function initialize() {

if (GBrowserIsCompatible()) {

//地図作成

var map = new GMap2(document.getElementById(“map_canvas”));

//地図位置指定

map.setCenter(new GLatLng(36.17336, 138.44971), 7); // 初期座標

//コントローラ追加

map.addControl(new GLargeMapControl());

map.enableScrollWheelZoom();

//XMLダウンロード

GDownloadUrl(“http://waox.main.jp/news/maps/googlemapsapi/example/gmarker.xml”, function(data) {

var xml = GXml.parse(data);

var markers = xml.documentElement.getElementsByTagName(“marker”);

for (var i = 0; i < markers.length; i++) {

var latlng = new GLatLng(parseFloat(markers[i].getAttribute(“lat”)),

parseFloat(markers[i].getAttribute(“lng”)));

map.addOverlay(new GMarker(latlng));

}

});

}

}

</script>