Google Mapを使うときに、特定の場所の緯度・経度を取得したいことは多々あります。
公式ドキュメントにあるように、住所をクエリー送信して取得すればよいのですが、微妙に位置がズレてるときってないですか？
ということで、マーカーをドラッグ＆ドロップできるようにして、その位置の緯度・経度を表示するスクリプトです。
HTMLのヘッダにスクリプトを書いておいて、
<script src="http://maps.google.com/maps?file=api&v=2&key=（マップAPIキー)"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var mapname = 'map';
var lat = 34.666358;
var lng = 133.918576;
var set_map = function () {
if (GBrowserIsCompatible()) {
// マップ表示
var point = new GLatLng(lat, lng);
var map = new GMap2(document.getElementById(mapname));
map.setCenter(point, 13);
// ドラッグ可能なマーカー
var mk = new GMarker(point, {draggable:true});
// ドロップ時に緯度経度取得
GEvent.addListener(mk,"dragend", function() {
var p = mk.getLatLng();
document.getElementById('latitude').value = p.lat();
document.getElementById('longitude').value = p.lng();
} );
// マップにマーカーを表示
map.addOverlay(mk);
document.getElementById('latitude').value = mk.getLatLng().lat();
document.getElementById('longitude').value = mk.getLatLng().lng();
// コントロール（小）
map.addControl(new GSmallMapControl);
}
}
// ONLOADイベントで呼び出し
window.onload = set_map;
window.onunload = GUnload();
//]]>
</script>
bodyでは地図表示と、緯度経度の表示場所を確保してあげれば。
<!-- 地図表示div -->
<div id="map"></div>
<!-- 緯度・経度の表示場所 -->
<form method="post" id="latlng">
<label for="latitude">緯度</label>
<input type="text" id="latitude" name="latitude" />
<label form="longitude">経度</label>
<input type="text" id="longitude" name="longitude" />
</form>
実例
マーカーをドラッグドロップすると、その位置の緯度経度が表示されます。 地図を拡大して、ピンポイント指定もできます。
緯度・経度をサーバに送信して保存すれば、いつでもその位置の地図を表示できますね。
参考
公式ドキュメント：ジオコーディング
http://code.google.com/intl/ja/apis/maps/documentation/services.html#Geocoding
コメントする