AngularJSを使ってGoogleマップ（１３）逆ジオコーディングで地図上クリックで住所を表示

ジオコーディングサービスを使って地図上をクリックしたポイントの位置情報（緯度、経度）を住所に変換して表示してみます。

（１）サンプルコード

　
地図上の任意の位置をクリックするとマーカーを表示し、マーカーをクリックすると情報ウィンドウをオープンし、その地点の住所を表示します。
　デモ表示へ
　

（２）サンプルコードの内容

　
１）マップクリックイベント時の動作を定義
　
“click”イベント発生時に位置情報から住所に変換して、マーカーと情報ウィンドウを定義するaddLatLng()関数を呼び出します。
（HTML）
<ui-gmap-google-map ・・events=”map.events”>
　
（スクリプト）
events: {
　click: function (map, eventName, originalEventArgs) {
　　addLatLng(map, eventName, originalEventArgs);
　}
},
　
２）addLatLng()関数を定義
　
①クリックイベントの引数からクリックした位置情報を取得
　
var e = originalEventArgs[0];
　
②ジオコーディングサービスを使って位置情報を住所に変換
　
Geocoderオブジェクトのgeocodeメソッドを使って位置情報（緯度、経度）を住所に変換します。
　
○geocodeメソッドの構文
geocode(request:GeocoderRequest, callback:function(Array.<GeocoderResult>, GeocoderStatus))
　
○サンプルコード
geocoder.geocode({‘latLng’: latlng}, function(results, status) {
　
・{‘latLng’: latlng}
　リクエスト。クリックした位置の緯度・経度情報を指定。
・status
　逆ジオコーディングした際のステータス
・results
　逆ジオコーディングした結果が保持される配列
　
③マーカーを定義
　
・上記①で取得した位置情報をマーカーに設定
　
var lat = parseFloat(e.latLng.lat());
var lng = parseFloat(e.latLng.lng());
　　：
$scope.map.marker.latitude = lat;
$scope.map.marker.longitude = lng;
　
・上記②で取得した住所を情報ウィンドウ内に設定
　
$scope.map.templateParameter.message = results[0].formatted_address;
　
３）情報ウィンドウを定義
　
情報ウィンドウのレイアウトを”templateUrl”属性で外部ファイルを指定し、情報ウィンドウ内に表示する文字列を”templateParameter”属性で指定します。
　
（HTML）

<ui-gmap-marker ng-repeat="m in map.markers" idkey='m.id'
        coords="m" click="onMarkerClicked(m)">
  <ui-gmap-window show="m.showWindow"
          closeClick="closeClick(m)"
          templateUrl="m.templateUrl"
          templateParameter="m.templateParameter"
  >
  </ui-gmap-window>
</ui-gmap-marker>

　
４）マーカークリック時に情報ウィンドウをオープン、クローズする関数を定義
　
“showWindow”属性を使って表示、非表示を制御します。
　
（HTML）

<ui-gmap-marker ng-repeat="m in map.markers" idkey='m.id'
        coords="m" click="onMarkerClicked(m)">
  <ui-gmap-window show="m.showWindow"
          closeClick="closeClick(m)"

　
（スクリプト）
$scope.closeClick = function (marker) {
　marker.showWindow = false;
};
$scope.onMarkerClicked = function (marker) {
　marker.showWindow = true;
};
　
AngularJS、Googleマップの他の記事の目次