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

（１）サンプルコード

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

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

　
①住所を位置情報に変換
　
ジオコーディングサービスを使ってテキストフォームに入力した住所を位置情報に変換します。
　
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マップの他の記事の目次

関連記事の目次