AngularJSを使ってGoogleマップ(14)ジオコーディングを使って入力した住所にマーカーを表示

ジオコーディングサービスを使ってフォームに入力した住所を位置情報(緯度、経度)に変換して、その位置にマーカーを表示してみます。

(1)サンプルコード


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

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


 
①住所を位置情報に変換
 
ジオコーディングサービスを使ってテキストフォームに入力した住所を位置情報に変換します。
 
Geocoderオブジェクトのgeocodeメソッドを使って位置情報(緯度、経度)を住所に変換します。
 
○geocodeメソッドの構文
geocode(request:GeocoderRequest, callback:function(Array.<GeocoderResult>, GeocoderStatus))
 
○サンプルコード
geocoder.geocode( { ‘address’: address}, function(results, status) {
 
・{ ‘address’: address}
 リクエスト。テキストフォームで入力した住所を指定。
・status
 ジオコーディングした際のステータス
・results
 ジオコーディングした結果が保持される配列
 
②地図の中心を上記①で取得した位置に変更
 
$scope.map.control.getGMap().setCenter(results[0].geometry.location);
 
“ui-gmap-google-map”ディレクティブの”control”属性のgetGMap()メソッドを使ってgoogle mapインスタンスにアクセスして、地図の中心を設定します。
 
③マーカーを定義
 
・上記①で変換して取得した位置情報をマーカーに設定
 
$scope.map.marker.latitude = results[0].geometry.location.lat();
$scope.map.marker.longitude = results[0].geometry.location.lng();
 
AngularJS、Googleマップの他の記事の目次

関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください