Google Maps JavaScript API v2Google Maps APIの使い方 － ジオコーディング
Google Maps JavaScript APIバージョン2は廃止され、バージョン3に移行しました。
» Google Maps JavaScript API v3の解説はこちら!
ジオコーディング
2008/5/5
GClientGeocoder([cache])
GClientGeocoder.getLatLng(address, callback)
GClientGeocoder.getLatLng(address, callback)
Googleサーバーと直接通信して、フォームに入力した住所のジオコードを取得するには、GClientGeocoderクラスを使用します。
GClientGeocoderクラスのgetLatLng()メソッドは、指定された住所をジオコード化するために、Googleサーバーにリクエストを送信します。 戻り値はありません。 第1引数addressに指定した住所が正常に特定できた場合、指定した住所の地点で第2引数callbackに指定した関数が起動します。 住所が特定できない場合、コールバック関数はnullを返します。 住所があいまいな場合は、最も一致する地点のみがコールバック関数に渡されます。
サンプルを見る
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![[
var map=null;
var geocoder=null;
function load(){
if(GBrowserIsCompatible()){
/* 地図インスタンス生成 */
map=new GMap2(document.getElementById("map"));
/* 中心地点 */
map.setCenter(new GLatLng(35.675147,140.116882), 13); /* 千葉県 */
/* コントロール追加 */
map.addControl(new GLargeMapControl()); /* コントロール大 */
/* ジオコーディング */
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);
}
}
);
}
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<form action="#" onsubmit="showAddress(this.address.value);return false;">
<p>
<input type="text" size="50" name="address" value="千葉県浦安市舞浜1-1" />
<input type="submit" value="検索" />
</p>
</form>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div>
ジオコードの情報を取得
2008/5/5
サンプルを見る
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![[
var map;
var geocoder;
function load(){
if(GBrowserIsCompatible()){
/* 地図インスタンス生成 */
map=new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.665246,139.712319), 13);
geocoder=new GClientGeocoder();
}
}
function addAddressToMap(response){
/* マーカー削除 */
map.clearOverlays();
if(!response || response.Status.code!=200){
alert("住所の場所を特定できませんでした。");
}else{
place=response.Placemark[0];
point=new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
/* マーカー追加 */
marker=new GMarker(point);
map.addOverlay(marker);
/* マーカー上に情報ウィンドウ表示 */
marker.openInfoWindowHtml("<textarea cols='30' rows='3'>"+place.address+"\n国コード："+place.AddressDetails.Country.CountryNameCode+"</textarea>");
}
}
/* 入力した住所の位置にマーカーを追加 */
function showLocation(){
var address=document.forms[0].q.value;
/* 入力した住所をジオコード化するためにGoogleサーバーにリクエスト送信 */
geocoder.getLocations(address, addAddressToMap);
}
/* 検索したアドレスを入力フォームに表示 */
function findLocation(address){
document.forms[0].q.value=address;
showLocation();
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div style="float:left; width:425px;">
<div id="map" style="width:425px;height:340px;"><!-- 地図描画領域 --></div><br>
</div>
<div style="float:left; width:330px; margin-left:20px;">
<form action="#" onsubmit="showLocation(); return false;">
<fieldset>
<legend>住所検索</legend>
<p>
<input type="text" name="q" value="" class="address_input" size="30" />
<input type="submit" name="find" value="検索" />
</p>
<ul>
<li><a href="javascript:findLocation('The Peninsula New York');">The Peninsula New York</a></li>
<li><a href="javascript:findLocation('700 Fifth Avenue at 55th Street, New York, NY 10019, USA');">700 Fifth Avenue at 55th Street, New York, NY 10019, USA</a></li>
</ul>
<ul>
<li><a href="javascript:findLocation('ディズニーランド');">ディズニーランド</a></li>
<li><a href="javascript:findLocation('千葉県浦安市舞浜2-11');">千葉県浦安市舞浜2-11</a></li>
<li><a href="javascript:findLocation('千葉県浦安市舞浜 ２－１１');">千葉県浦安市舞浜 ２－１１</a></li>
<li><a href="javascript:findLocation('千葉県浦安市舞浜二丁目十一番地');">千葉県浦安市舞浜二丁目十一番地</a></li>
</ul>
<ul>
<li><a href="javascript:findLocation('ベルサイユ宮殿');">ベルサイユ宮殿</a></li>
<li><a href="javascript:findLocation('ヴェルサイユ宮殿');">ヴェルサイユ宮殿</a></li>
<li><a href="javascript:findLocation('Château de Versailles');">Château de Versailles</a></li>
</ul>
</fieldset>
</form>
</div>
<br style="clear:both;" />
国コードの設定・取得
2008/5/5
GClientGeocoder.setBaseCountryCode(countryCode)
GClientGeocoder.getBaseCountryCode()
GClientGeocoder.getBaseCountryCode()
GClientGeocoderクラスのsetBaseCountryCode()メソッドは、検索結果を国コードのドメインから送信されたように見せかけるようジオコーダを設定します。 第1引数countyCodeには、ISO 3166-1（Alpha-2 code）の国コードを指定します。 ジオコーディングは、地図自体がジオコーディングをサポートしている国でしか利用できません。 一部例外がありますが、ほとんどのISO 3166-1コードは、最上位レベルのインターネットドメインと同一です。 たとえば、「JP」は日本最上位レベルのインターネットドメイン .co.jp を示します。 デフォルトドメインは、マップAPIを最初にロードしたドメインが適用されます。 国コードは大文字と小文字を区別しません。 戻り値はありません。
GClientGeocoderクラスのgetBaseCountryCode()は、指定したジオコーダに使用されている現在の国コードを返します。 ジオコーダに国コードが設定使用されていない場合は、nullを返します。
サンプルを見る
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![[
var map=null;
var geocoder=null;
function load(){
if(GBrowserIsCompatible()){
/* 地図インスタンス生成 */
map=new GMap2(document.getElementById("map"));
/* 中心地点 */
map.setCenter(new GLatLng(35.675147,140.116882), 13); /* 千葉県 */
/* コントロール追加 */
map.addControl(new GLargeMapControl()); /* コントロール大 */
/* ジオコーディング */
geocoder=new GClientGeocoder();
}
}
function showAddress(address){
if(geocoder){
geocoder.setBaseCountryCode("JP-12"); /* 千葉県 ISO 3166-2:JP */
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>"+geocoder.getBaseCountryCode());
}
}
);
}
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<form action="#" onsubmit="showAddress(this.address.value);return false;">
<p>
<input type="text" size="50" name="address" value="千葉県浦安市舞浜1-1" />
<input type="submit" value="検索" />
</p>
</form>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div>