Google Maps API v3で住所検索

Posted by on 2011年2月10日

バージョン3になってIDなどが不要になり、手軽に利用できるようになった

Google Maps API。

住所から位置を検索して自サイトのhtml上に表示させるスクリプトを作成してみた。

<html>
<head>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript">
		google.maps.event.addDomListener(window, 'load', function() {
			
			var address = "東京都新宿区西新宿２丁目８－１";
			var title = "東京都庁";
			
		    var mapdiv = document.getElementById("map_canvas");

		    var myOptions = {
		        zoom: 16,
		        mapTypeId: google.maps.MapTypeId.ROADMAP,
		        scaleControl: true
		    };
		    var map = new google.maps.Map(mapdiv, myOptions);

			var geocoder = new google.maps.Geocoder();  
			geocoder.geocode({'address': address}, function(results, status) {  
				if (status == google.maps.GeocoderStatus.OK) {  
					map.setCenter(results[0].geometry.location);  
					marker.setPosition(results[0].geometry.location);  
					
				} else {
					document.getElementById("map_canvas").innerHTML = "Google Maps:住所から位置を特定できませんでした。";
				}
			});
			
			var marker = new google.maps.Marker({
			    position: new google.maps.LatLng(0, 0),
			    map: map, 
			    title: title
			});

			
		});
	</script>
</head>
<body>
	<div id="map_canvas" style="width:500px; height:500px;"></div>
</body>
</html>

他にも色々な事ができそう。

未分類

Comments are closed.