GoogleMapを使って住所から緯度と経度を求める
Google Maps API を使って地名もしくは住所から緯度経度を求めるには
GClientGeocoder のgetLatLng(address, callback）メソッドを使うと
GLatLang が返却される。これから緯度と経度をそれぞれ取得すればよい。
参考：http://blog.fkoji.com/2006/06142213.html
下がためしに作成したソースです。
左上のテキストボックスに地名もしくは住所を入力して得られた緯度/経度を中心にします。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>緯度経度お試し</title>
<script xsrc="http://maps.google.com/maps?file=api&v=2.x&key=YouKey" mce_src="http://maps.google.com/maps?file=api&v=2.x&key=YouKey" type="text/javascript"></script>
<script xsrc="http://www.google.com/jsapi" mce_src="http://www.google.com/jsapi" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">
//<![CDATA[
var geocode = new GClientGeocoder();
var map;
var centerMarker;
var centerPoint;
/*
* bodyをロード後にGooleMapの地図を表示
*/
function load() {
centerPoint = new GLatLng(35.675888, 139.744858);
//地図のインスタンスを生成します
map = new GMap2(document.getElementById("map"));
// 中心値に移動
map.setCenter(centerPoint, 17);
// 値にマーカーを表示
centerMarker = new GMarker(centerPoint);
map.addOverlay(centerMarker);
// パン移動とスライダーズームの使える大きなコントロール
map.addControl(new GLargeMapControl());
} /*
* 住所から緯度経度を求めてGoogleMapに反映
*/
function localsearch(){
// 入力された住所の住所の一覧を取得
var address=document.getElementsByName("target_address").item(0).value;
// GClientGeocoder を使って緯度/経度を求める
geocode.getLatLng(address, function(point){
if(point != null ){
// 取得できた緯度、経度を取り出す
var lat = point.lat();
var lng = point.lng();
var msg = "lat=" + lat + " lng=" + lng;
document.getElementById("result").innerHTML = msg;
// GooelMapの中心を取得した緯度経度に移動
centerPoint = point;
map.setCenter(centerPoint);
// マーカーを新しい中心緯度経度に作り変え
if ( centerMarker != null ){
map.removeOverlay(centerMarker);
centerMarker = new GMarker(centerPoint);
map.addOverlay(centerMarker);
}
}else{
alert("「" + address + "」の緯度経度を取得できませんでした");
}
}
);
}//]]>
</script>
</head>
<body onload="load()">
<input type="textarea" id="target_address" name="target_address" value="国会議事堂"><input type="button" name="exec" value="検索" onClick="localsearch()">
<div id="result">ここに求めた緯度経度</div>
<div id="map" style="width: 480px; height: 320px;"></div>
</body>
</html>
トラックバック URI : http://www.akky.org/archives/35/trackback/