マッピィ

ジオコーディング

住所から座標を取得

ジオコーディングとは、住所を地理座標に変換する処理のことをいいます。また、逆の操作(座標を住所にする)を行うこともできます。この処理は「逆ジオコーディング」と呼ばれています。

ジオコードオブジェクトを作成し、geocode()methodで、Geocoderにリクエストを送信します。

コンストラクタ説明
Geocoder()ジオコード リクエストを Google サーバーに送信する Geocoder の新しいインスタンスを作成します。

Geocoder に送信するジオコーディング リクエストの仕様として次のプロパティがあります。

プロパティタイプ説明
addressstring[省略可] 住所。
boundsLatLngBounds[省略可] サーチ範囲用の LatLngBounds。
languagestring[省略可] サーチ結果の優先する言語。
locationLatLng[省略可] サーチ用の LatLng。
regionstring[省略可] サーチ用のトップレベルドメインの国コード。

addressプロパティには、検索する住所文字列を指定します。 住所に日本語を指定できるようにするには、languageプロパティに「ja」を指定します。 その他、国コード(regionプロパティ)、検索範囲(bounds)などを指定可能です。

注: Geocoding API は Google マップと組み合わせて使用する場合にのみ使用できます。地図に表示せずにジオコーディングの結果のみを利用することは禁止されています。

//ジオコードオブジェクト
var geocoder = new google.maps.Geocoder();
geocoder.geocode(
  {
    'address': '住所文字列',
    'region': 'jp'
  },
  function(results, status){
    if(status==google.maps.GeocoderStatus.OK){
    	//処理
    }
  }
);

リクエストが完了すると、callback関数に結果(GeocoderResultオブジェクト)とステータス(GeocoderStatusクラス)が渡されます。 有効なジオコードが取得できたかどうかは、GeocoderStatusが「OK」になっているかどうかで判定できます

ステータス コード

geocode() への呼び出しの完了時に、Geocoder によって返されるステータス。

定数説明
ERRORGoogle サーバーへの接続に問題が発生しました。
INVALID_REQUESTGeocoderRequestは無効でした。一般的に、クエリ(address または latLng)が不足していることを示します。
OKレスポンスには有効な GeocoderResponse が含まれています。ジオコードが成功したことを示します。
OVER_QUERY_LIMITウェブページは、短期間にリクエストの制限回数を超えました。リクエストが割り当て量を超えていることを示します。
REQUEST_DENIEDウェブページではジオコーダを使用できません。何らかの理由でリクエストが拒否されたことを示します。
UNKNOWN_ERRORサーバー エラーのため、ジオコーディング リクエストを処理できませんでした。もう一度試すと正常に処理される可能性があります。
ZERO_RESULTSGeocoderRequestに対する結果が見つかりませんでした。ジオコードは成功しましたが、結果が返されなかったことを示します。遠隔地にある存在しない address または latng がジオコードに渡されると、このような状態になることがあります。

サンプルコード

サンプル.js

var geocoder;
var map;
function initialize() {
 geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(35.697456,139.702148);
 var opts = {
 zoom: 10,
 center: latlng,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 }
 map = new google.maps.Map
  (document.getElementById("map_canvas"), opts);
}

function codeAddress() {
 var address = document.getElementById("address").value;
 if (geocoder) {
 geocoder.geocode( { 'address': address,'region': 'jp'},
    function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    map.setCenter(results[0].geometry.location);

   var bounds = new google.maps.LatLngBounds();
   for (var r in results) {
    if (results[r].geometry) {
     var latlng = results[r].geometry.location;
     bounds.extend(latlng);
    new google.maps.Marker({
    position: latlng,map: map
    });

    document.getElementById('id_ido').innerHTML = latlng.lat();
    document.getElementById('id_keido').innerHTML = latlng.lng();

    }
   }
   //map.fitBounds(bounds);
   }else{
    alert("Geocode 取得に失敗しました reason: "
         + status);
   }
  });
 }
}

サンプル.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps JavaScript API ジオコーディング(Geocode)</title>
<style>
p {line-height:180%}
.head-title {width:100%;background:#87ceeb;color:#fff;text-indent:8px;font-weight:700;line-height:180%}
</style>
<script
 src="https://maps.google.com/maps/api/js?key=APIキー"></script>
<script src="サンプル.js" ></script>
</head>
<body onload="initialize()">
<div class="head-title">Google Maps APIを使ったサンプル。</div>
<p>ジオコーディング 住所から座標を取得[Geocode]住所 or ランドマーク</p>
<table style="width:100%;border:0">
<tr style="background-color:#dddddd">
<th style="width:20%">項目</th>
<th>情報</th></tr>
<tr><td>緯度</td><td id="id_ido"></td></tr>
<tr><td>経度</td><td id="id_keido"></td></tr>
</table>
<input id="address" type="textbox" value="東京都" style="line-height:1.6em;font-size:16px">
<input type="button" value="ジオコーディン" onclick="codeAddress() style="height:30px">
<div id="map_canvas" style="width:100%;height:300px"></div>
</body>
</html>

表示例 住所やランドマークから座標を取得

住所やランドマークから座標を取得

 地図サンプルイメージ 
 住所やランドマークから座標を取得 

サンプルイメージ地図は地理院タイル (標高タイル)を加工して作成

Google Maps サンプル > 住所やランドマークから座標を取得

※リクエスト制限を設けてありますので1日の上限アクセス(割り当て)を超えた場合、サンプルが機能しないこともありますのでご了承ください。

地図座標位置の取得

クリックで地理座標、住所、ズームレベルを取得するサンプル。

サンプルコード

サンプル.js

function initialize() {
 var Marker;
 var map;
 var latlng = new google.maps.LatLng(35.658704,139.745408);
 var opts = {
  zoom: 15,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
 }

 map = new google.maps.Map
 (document.getElementById("map_canvas"),opts);

//地図クリックイベントの登録
 google.maps.event.addListener(map, 'click',
 function(event) {
  if (Marker){Marker.setMap(null)};
  Marker = new google.maps.Marker({
   position: event.latLng,
   draggable: true,
   map: map
  });
  infotable(Marker.getPosition().lat(),
  Marker.getPosition().lng(),map.getZoom());
  geocode();
  //マーカードラッグイベントの登録
  google.maps.event.addListener(Marker,'dragend',
   function(event) {
   infotable(Marker.getPosition().lat(),
   Marker.getPosition().lng(),map.getZoom());
   geocode();
  })
  //地図ズームチェンジイベントの登録
  google.maps.event.addListener(map, 'zoom_changed',
   function(event) {
   infotable(Marker.getPosition().lat(),
   Marker.getPosition().lng(),map.getZoom());
  })
 })
//ジオコーディング
 function geocode(){  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({ 'location': Marker.getPosition()}, 
     function(results, status) {
   if (status == google.maps.GeocoderStatus.OK && results[0]){
     document.getElementById('id_address').innerHTML = 
         results[0].formatted_address.replace(/^日本, /, '');
   }else{
     document.getElementById('id_address').innerHTML = 
       "Geocode 取得に失敗しました";
    alert("Geocode 取得に失敗しました reason: "
           + status);
   }
  });
 }

//HTMLtagを更新
 function infotable(ido,keido,level){
  document.getElementById('id_ido').innerHTML = ido;
  document.getElementById('id_keido').innerHTML = keido;
  document.getElementById('id_level').innerHTML = level;
 }
}

サンプル.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps JavaScript API 地図座標位置の取得</title>
<style>
p {line-height:180%}
.head-title {width:100%;background:#87ceeb;color:#fff;text-indent:8px;font-weight:700;line-height:180%}
</style>
<script
 src="https://maps.google.com/maps/api/js?key=APIキー"></script>
<script src="サンプル.js"></script>
</head>
<body onload="initialize()">
<div class="head-title">Google Maps APIを使ったサンプル。</div>
<p>地図座標位置の取得 地図上でクリックで座標・住所の取得</p>
<table style="width:100%;border:0">
<tr style="background-color:#dddddd">
<th style="width:20%">項目</th>
<th>情報</th></tr>
<tr><td>緯度</td><td id="id_ido"></td></tr>
<tr><td>経度</td><td id="id_keido"></td></tr>
<tr><td>ズームレベル</td><td id="id_level"></td></tr>
<tr><td>住所</td><td id="id_address"></td></tr>
</table>
<div id="map_canvas" style="width:100%;height:300px"></div>
</body>
</html>

表示例 地図上でクリックで座標・住所の取得

地図上でクリックで座標・住所の取得

 地図サンプルイメージ 
 地図上でクリックで
座標・住所の取得 

サンプルイメージ地図は地理院タイル (標高タイル)を加工して作成

Google Maps サンプル > 地図座標位置の取得

※リクエスト制限を設けてありますので1日の上限アクセス(割り当て)を超えた場合、サンプルが機能しないこともありますのでご了承ください。

リバースジオコーディング

リバースジオコーディングとは、地理座標を住所に変換する処理のことをいいます。

Geocoder は動的な逆ジオコーディングをサポートしています。addressの代わりにコンマで区切られた緯度/経度のペアをlatLngパラメータに設定します。

注: 逆ジオコーディングは科学的技術に基づいていません。ジオコーダは許容範囲内にもっとも近い住所があるか探すように試みます。

//ジオコードオブジェクト
var geocoder = new google.maps.Geocoder();
geocoder.geocode(
  {
    'latLng': '緯度,経度'
  },
  function(results, status){
    if(status==google.maps.GeocoderStatus.OK){
    	//処理
    }
  }
);

サンプル.js

var geocoder;
var map;
var infowindow = new google.maps.InfoWindow();
 var marker;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(35.658704,139.745408);
var myOptions = {
 zoom: 8,
 center: latlng,
 mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById
("map_canvas"), myOptions);
}
function codeLatLng() {
 var input = document.getElementById("latlng").value;
 var latlngStr = input.split(",",2);
 var lat = latlngStr[0];
 var lng = latlngStr[1];
 var latlng = new google.maps.LatLng(lat,lng);
 if (geocoder) {
  geocoder.geocode({'latLng': latlng},
  function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    if (results[1]) {
     map.setZoom(11);
     marker = new google.maps.Marker({
     position: latlng,
     map: map
     });
     infowindow.setContent(results[1].formatted_address);
     infowindow.open(map, marker);
     }
    } else {
     alert("Geocoder failed due to: " + status);
    }
  });
 }
}

サンプル.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps JavaScript API リバースジオコーディング</title>
<style>
p {line-height:180%}
.head-title {width:100%;background:#87ceeb;color:#fff;text-indent:8px;font-weight:700;line-height:180%}
</style>
<script
 src="https://maps.google.com/maps/api/js?key=APIキー"></script>
<script src="サンプル.js"></script>
</head>
<body onload="initialize()">
<div class="head-title">Google Maps APIを使ったサンプル。</div>
<p>リバースジオコーディング</p>
<div id="map_canvas" style="width:100%;height:300px"></div>
<input id="latlng" type="textbox"  
value="35.658704,139.745408" style="width:200px;line-height:1.6em;font-size:16px">
<input type="button" value="Reverse Geocode" 
onclick="codeLatLng()" style="height:30px">
</body>
</html>

表示例 リバースジオコーディング 座標から住所を取得

リバースジオコーディング

 地図サンプルイメージ 
 リバースジオコーディング 

サンプルイメージ地図は地理院タイル (標高タイル)を加工して作成

Google Maps サンプル > リバースジオコーディング

※リクエスト制限を設けてありますので1日の上限アクセス(割り当て)を超えた場合、サンプルが機能しないこともありますのでご了承ください。

ページトップ