住所を使って緯度経度を取得する(2)
（注意！）この記事は、旧APIであるGoogle Maps API version 2を解説したものです。version 2の利用は推奨されていないので、意図的に旧バージョンの情報を探していない場合は、新しいバージョンの解説をご覧下さい。
Google Maps APIには住所情報から緯度と経度を取得するGClientGeocoderというAPIがあります。 「住所を使って緯度経度を取得する(1)」では、発見した座標を表示していませんでした。 今回のサンプルは、発見した座標もInfoWindowで表示するようにしました。
住所を入力して移動する
以下のサンプルはGoogle MAPS APIを使ったページのソースです。 強調してある部分が前回のサンプルと違う箇所です。 下記サンプルを試すには「key=aaaaa」の「aaaaa」部分をご利用のAPI key文字列に変更してください。
<!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>Google Maps JavaScript API Example - simple</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=aaaaa"
type="text/javascript" charset="utf-8"></script>
</head>
<body onload="load()">
<div id="map" style="width:450px; height:400px"></div>
<script type="text/javascript">
//<![CDATA[
var map = null;
var geocoder = null;
// 初期化
// <body onload="load()"> で呼び出されています
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.67431, 139.69082), 13);
// GClientGeocoderを初期化
geocoder = new GClientGeocoder();
}
}
// 「移動する」ボタンを押されると実行されます
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address +
"<br>(lat=" + point.lat() +
", lng=" + point.lng() + ")");
}
}
);
}
}
//]]>
</script>
<form action="#"
onsubmit="showAddress(this.address.value); return false">
<P>
<input type="text" size="40"
name="address" value="渋谷区1-1" />
<input type="submit" value="移動する" />
</P>
<div id="map" style="width:500px; height:600px"></div>
</form>
</body>
</html>
上記サンプルでは、緯度経度情報を使ってマーカを地図に追加するとともに、openInfoWindowHtmlを使って住所情報文字列と座標情報を表示しています。 上記サンプルでは、文字列の取得方法としてFORMを使っていますが、いきなりgetLatLngに「渋谷区1-1」という文字列を入れても同様に動作します。
表示例
表示例です。
