めも帖

「めも帖」代わりにダラダラと書いていったり、めもしたりしているだけです。

GoogleMaps API Version.3を試してみました

JavaScrpt

GoogleMapsのAPIがVersion.3になって使ったことがなかったので、試してみました。
jQuery風になっているんですね、Version.3は。あと、オブジェクトの取り扱いが楽です。
V3のほうが、だいぶいい感じになっていますね。

クリックした場所の経度緯度を取得し、表示

<html>
<head>
<title>Google Maps V3</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
<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 geocoder = new google.maps.Geocoder();

	geocoder.geocode(
		{address:'住所を書いておく'},
		function(results, status) {
			points = results[0].geometry.location;

			// 地図の表示
			var mapdiv = document.getElementById('map_canvas');
			var myOptions = {
				zoom: 16,
				center: points,
				mapTypeId: google.maps.MapTypeId.ROADMAP,
				scaleControl: true
			};
			var map = new google.maps.Map(mapdiv, myOptions);

			var marker     = new google.maps.Marker({map:map});
			var infowindow = new google.maps.InfoWindow();

			marker.setPosition(points);
			infowindow.setContent('現在地' + points);
			infowindow.open(map,marker);

			// event
			google.maps.event.addListener(map, 'click', function(event) {
				var new_point = event.latLng;

				marker.setPosition(new_point);
				infowindow.setContent('現在地' + new_point);
				infowindow.open(map,marker);
				
				map.setCenter(new_point);
			});

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

住所から経度緯度を取得し、表示

<html>
<head>
<title>Google Maps V3</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
<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 geocoder = new google.maps.Geocoder();
	geocoder.geocode(
		{address:'住所'},
		function(results, status) {
			points = results[0].geometry.location;

			var mapdiv = document.getElementById('map_canvas');
			var myOptions = {
				zoom: 16,
				center: points,
				mapTypeId: google.maps.MapTypeId.ROADMAP,
				scaleControl: true,
			};
			var map = new google.maps.Map(mapdiv, myOptions);
			
			var marker = new google.maps.Marker({
				position: points,
				map: map,
				title: 'マーカーのタイトル'
			});
		
			var infowindow = new google.maps.InfoWindow({
				content: '情報ウィンドウ内に表示するHTML',
				size: new google.maps.Size(500, 150)
			});
		
			google.maps.event.addListener(marker, 'click', function() {
				infowindow.open(map,marker);
			});

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

Google Maps APIプログラミング入門

Google Maps APIプログラミング入門