例−９：XMLファイルを読み込んで、地図上にマーカーをマッピングする その2
・xmlファイルを読み込んで、マッピングします。
・[Example-8]とは異なり、GDownloadUrl()関数を使ってXMLを読み込んでいます。
|
サンプルプログラム |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=[あなたのAPIキー]" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map;
function addMarker() { //マーカーを表示
GDownloadUrl("/map/map_example_8.xml",function(data, responseCode) {
var xmlDoc = GXml.parse(data);
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);
}
});
}
function createMarker(mpoint, index) {
var icon = new GIcon();
icon.image = "/img/marker_flag.png";
icon.shadow = "/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(){
map = new GMap2( document.getElementById("map"));
map.setCenter( new GLatLng(35.684, 139.750), 12 );
addMarker(); //マーカーをマッピング
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 500px"></div>
</body>
</html> |
