ジオコーディングサービスを使ってフォームに入力した住所を位置情報(緯度、経度)に変換して、その位置にマーカーを表示してみます。
(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マップの他の記事の目次