VPSサーバーでWebサイト公開 備忘録 ~Linux、MySQLからAJAXまで

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

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

(1)サンプルコード


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

(2)サンプルコードの内容


 
1)マップクリックイベント時の動作を定義
 
“click”イベント発生時に位置情報から住所に変換して、マーカーと情報ウィンドウを定義するaddLatLng()関数を呼び出します。
(HTML)
<ui-gmap-google-map ・・events=”map.events”>
 
(スクリプト)
events: {
 click: function (map, eventName, originalEventArgs) {
  addLatLng(map, eventName, originalEventArgs);
 }
},
 
2)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;
 
3)情報ウィンドウを定義
 
情報ウィンドウのレイアウトを”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>

 
4)マーカークリック時に情報ウィンドウをオープン、クローズする関数を定義
 
“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マップの他の記事の目次

モバイルバージョンを終了