スポンサードリンク

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

とても便利な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>

◆サンプル

スポンサードリンク

Related Posts

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">