【Googleマップ】Google maps APIを使って地点の座標を取得するサンプル

以前APIを使ってGoogleマップの静止画像を生成する方法を書きましたが、画像作成時に座標を数値で入力する必要があるので、座標をサクッと取得するサンプルも作ってみました。

デモ

こんなんできました。

デモページ

Javascript

var geocoder;
var map;
var myLatlng = new google.maps.LatLng(36.566442,137.662105);
var marker;
// 初期表示
function initialize(){
	geocoder = new google.maps.Geocoder();
	var myOptions = {
		zoom: 12,
		center: myLatlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	// 地図を生成
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	// マーカーを設置
	marker = new google.maps.Marker({
		position: myLatlng,
		map: map, 
		draggable: true
	});
	// ドラッグ時の処理
	google.maps.event.addListener(marker, "dragend", function(){
		setLatLng(marker);
		map.setCenter(marker.getPosition());
	});
	setLatLng(marker);
}
// 住所から検索
function codeAddress(){
	var address = document.getElementById("address").value;
	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);
			setLatLng(marker); // 座標書き出し
		}else{
			alert("検索ワードに該当がありません：" + status);
		}
	});
}
// 座標書き出し。
function setLatLng(marker){
	var p = marker.getPosition();
	$("span#latitude").html(p.lat());
	$("span#longitude").html(p.lng());
}

HTML

<div id="map_canvas"></div>

<input id="address" type="text" value="">
<input type="button" value="住所から検索" onclick="codeAddress()" class="submit"><br>
現在の座標：<span id="latitude"></span>,<span id="longitude"></span><br>