Trans

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

Google Maps APIでXMLからデータを取得。アイコンをデフォルトから変更したやつ。

<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(34.694599915338316, 135.19487857818604), 11);
			
			var icon = new GIcon();
			icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
			icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
			icon.iconSize = new GSize(12, 20);
			icon.shadowSize = new GSize(22, 20);
			icon.iconAnchor = new GPoint(6, 20);
			icon.infoWindowAnchor = new GPoint(5, 1);
			
			function createMarker(point, html) {
				var marker = new GMarker(point, icon);
				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>