back
Google Maps API (4/4)
■ジオコーディングと逆ジオコーディング
Googleマップには「ジオコーディング（Geo Coding）」という機能があります。これは、住所などの情報からその位置（経度・緯度）を検索する機能です。また、この反対に「逆ジオコーディング」（位置の情報からその住所を検索する）という機能もあります。
これらは、まとめて「google.maps.Geocoder」というオブジェクトとして用意されています。この中に用意されている「geocode」というメソッドにより、ジオコーディングが行われます。
まず、オプション設定の配列について説明しておきましょう。これは以下のような項目が用意されます。
address: 住所を示すテキスト。ジオコーディング時には必須。
latLng: 位置を示すテキスト。逆ジオコーディング時には必須。
language: 使用言語を示す値。
region: 検索するエリア（国・地域）を示す値。
非常に面白いのは、getcodeメソッドは、１つでジオコーディングと逆ジオコーディングの両方を行うことができる、という点です。オプション設定の配列に「address」を用意すると、その住所の情報から位置を検索します。そして「latLng」を用意すると、その位置の情報から住所を検索するのです。オプションには、この２つのいずれかの値だけを用意します。
また、検索のための言語とリージョンの情報は必須です。これが指定されていないと、住所の情報をうまく認識できなかったり、全く別の場所の位置を検索してしまったりします。
コールバック関数は、Googleサーバーから結果を取得した際に自動的に呼び出され実行される関数です。これは、
第１引数の検索結果オブジェクトは、検索された場所などを配列としてまとめた形になっています。各オブジェクトには、以下のようなプロパティが用意されています。
types――情報の種類を示す値がまとめられた配列。
formatter_address――検索された住所の値。
address_components――住所の細かな表現をまとめた配列。short_name, long_nameなどの値がまとめられている。
geometry――位置やエリアに関する値をまとめた配列。locationで検索位置が得られる。
とりあえずは、result[番号].formatter_addressで住所が、results[番号].geometry.locationで位置が得られる、ということだけわかっていればOKでしょう。
下に簡単な利用例をあげておきます。これは、住所を入力すると、ジオコーディングによりその場所を検索し、そこにマーカーと情報ウインドウを表示するというサンプルです。実際に試してみるとわかりますが、住所だけでなく、「ディズニーランド」とか「富士山」といった固有名詞でも検索されることがわかります。有名な観光地や施設などは、このように名前だけで場所を探し出すことができます。
これらは、まとめて「google.maps.Geocoder」というオブジェクトとして用意されています。この中に用意されている「geocode」というメソッドにより、ジオコーディングが行われます。
[Getcoder].geocode( オプション設定の配列 , コールバック関数 )geocodeメソッドは、第１引数に必要な設定情報をまとめた配列を、第２引数に処理完了時に呼び出されるコールバック関数をそれぞれ渡します。geocodeは、JavaScriptのAjax通信によりGoogleサーバーに呼び出しをかけ、結果を取得します。このため、検索結果はコールバック関数によって処理する必要があります。
まず、オプション設定の配列について説明しておきましょう。これは以下のような項目が用意されます。
address: 住所を示すテキスト。ジオコーディング時には必須。
latLng: 位置を示すテキスト。逆ジオコーディング時には必須。
language: 使用言語を示す値。
region: 検索するエリア（国・地域）を示す値。
非常に面白いのは、getcodeメソッドは、１つでジオコーディングと逆ジオコーディングの両方を行うことができる、という点です。オプション設定の配列に「address」を用意すると、その住所の情報から位置を検索します。そして「latLng」を用意すると、その位置の情報から住所を検索するのです。オプションには、この２つのいずれかの値だけを用意します。
また、検索のための言語とリージョンの情報は必須です。これが指定されていないと、住所の情報をうまく認識できなかったり、全く別の場所の位置を検索してしまったりします。
コールバック関数は、Googleサーバーから結果を取得した際に自動的に呼び出され実行される関数です。これは、
function( 結果 , ステータス ){ ……実行する処理…… }このような形で定義します。引数は２つ渡され、第１引数には検索結果のオブジェクトが、第２引数には検索時のステータスを示す値が渡されます。第２引数の値が、google.maps.GeocoderStatus.OKであれば、正常に検索が行えたことを示します。第１引数の検索結果オブジェクトは、検索された場所などを配列としてまとめた形になっています。各オブジェクトには、以下のようなプロパティが用意されています。
types――情報の種類を示す値がまとめられた配列。
formatter_address――検索された住所の値。
address_components――住所の細かな表現をまとめた配列。short_name, long_nameなどの値がまとめられている。
geometry――位置やエリアに関する値をまとめた配列。locationで検索位置が得られる。
とりあえずは、result[番号].formatter_addressで住所が、results[番号].geometry.locationで位置が得られる、ということだけわかっていればOKでしょう。
下に簡単な利用例をあげておきます。これは、住所を入力すると、ジオコーディングによりその場所を検索し、そこにマーカーと情報ウインドウを表示するというサンプルです。実際に試してみるとわかりますが、住所だけでなく、「ディズニーランド」とか「富士山」といった固有名詞でも検索されることがわかります。有名な観光地や施設などは、このように名前だけで場所を探し出すことができます。
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf8">
<title>Sample Page</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script>
<script type="text/javascript">
<!--
var map = null;
var geocoder = null;
function init(){
geocoder = new google.maps.Geocoder();
var element = document.getElementById("map");
var latlng = new google.maps.LatLng(35.682956,139.766092);
var options = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE,
};
map = new google.maps.Map(element,options);
}
function doFind(){
var input = document.getElementById("address");
var options = {
address: input.value,
language: 'ja',
region: 'jp'
};
var func = function(results,status){
if (status == google.maps.GeocoderStatus.OK){
var p = results[0].geometry.location;
map.setCenter(p);
var opts = {
position: p,
map: map,
title: results[0].formatted_address
};
var marker = new google.maps.Marker(opts);
var infoopt = {
content: results[0].formatted_address
};
var info = new google.maps.InfoWindow(infoopt);
info.open(map,marker);
}
};
geocoder.geocode(options,func);
}
//-->
</script>
</head>
<body onload="init();">
<h1>Map Sample</h1>
<input type="text" id="address">
<input type="button" value="検索" onclick="doFind();">
<div id="map" style="width:400px; height:400px;"></div>
</body>
</html>
| << 前へ |