Trans

NPOやソーシャルビジネスの創業・経営・マネジメント

Google Maps APIでXMLからデータを取得し、クリックしたらinfowindowが出てくるJavaScript

<script type="text/javascript">
	//<![CDATA[

	function load() {
		if (GBrowserIsCompatible()) {
			var map = new GMap2(document.getElementById("map"));
			map.addControl(new GSmallMapControl());
			map.addControl(new GOverviewMapControl(),
						new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10, 10)));
			map.setCenter(new GLatLng(35.684, 139.750), 13);
			
			function createMarker(point, html) {
				var marker = new GMarker(point);
				GEvent.addListener(marker, "click", function() {
					marker.openInfoWindowHtml(html);
				});
				return marker;
			}

			GDownloadUrl("data.xml", function(data) {
				var xml = GXml.parse(data);
				var markers = xml.documentElement.getElementsByTagName("marker");
					for (var i = 0; i < markers.length; i++) {
						var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
												parseFloat(markers[i].getAttribute("lng")));
						var html = markers[i].getAttribute("html");
					var marker = createMarker(point, html);
					map.addOverlay(marker);
					}
			});
		}
	}

    //]]>
</script>