スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

Google Maps APIを利用する際、以前はマップ上にマーカーを立てるのにそのポイントとなる経度、緯度が必要でした。
つまり、住所から直接ポイントを設定することは出来ず、住所などの情報から一度、経度、緯度を調べる必要があったのです。マーカーが増えると、その作業もめんどくさくなりますね。

今回、このようなマーカーを複数立てるマップコンテンツを作ることになり調べていたのですが、Google Maps APIよりテキストの住所から経緯を取得できるAPIが公開されていたので、早速使ってみました。
Google Geocoding API

まずはサービスを使用するにあたり、APIを読み込みます。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">

次に以下のようにしてGeocodingのインスタンスを生成します。

var geo = new google.maps.Geocoder();

APIにリクエストを投げる際には関数geocodeを使用します。関数geocodeの第一引数にはリクエストパラメータ、第二引数にはコールバック関数を設定します。
今回は試しにパラメータに東京スカイツリーの住所「東京都墨田区押上1丁目」を設定してみます。

geo.geocode(
	{
		'address': '東京都墨田区押上1丁目'
	},
	function(result, status) {
		if (status == google.maps.GeocoderStatus.OK) {
			alert('取得成功');
			alert('経度;' + result[0].geometry.location.lng());
			alert('緯度;' + result[0].geometry.location.lat());
		}else{
			alert('取得失敗');
		}
	}
);

レスポンス結果はコールバック関数の第一引数に、ステータスコードは第二引数にセットされます。
このサンプルを実行すると東京スカイツリーは「経度:139.81148759999996」「緯度:35.7105827」という結果を取得できました。

以下に、実際に取得した値を中心にして、Google Mapsを表示させてみました。

var latlng = new google.maps.LatLng(35.7105827, 139.81148759999996);
var myOptions = {
	zoom: 17,
	center: latlng,
	mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googlemaps"), myOptions);



住所で日本語を扱うという点で、Geocoderの精度がどんなものかは、まだ検証の余地がありそうです。
ただ、うまく活用することができれば、ローカルDBに経度・緯度の値を保持する必要もなくなりますし、とても有効だと思います。

このエントリーをはてなブックマークに追加

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Monthly Archives

Search