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

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

(1)サンプルコード
 デモ表示へ
地図上の任意の位置をクリックするとマーカーを表示し、マーカーをクリックすると情報ウィンドウをオープンし、その地点の住所を表示します。
 
①HTML本文

<div ng-controller="MyCtrl">
  <div class="row">
    <div class="col-sm-6">
      <google-map 
        id="map-canvas"
        center="map.center"
        zoom="map.zoom"
        draggable="true"
        options="map.options"
        control="map.control"
      >
        <marker coords="map.marker">
        </marker>
      </google-map>
    </div>
    <div class="col-sm-6">
      <H3 class="well well-sm">住所を入力してマーカーを表示</H3>
      <form class="form" role="form">
        <div class="form-group">
          <label class="control-label">住所を入力</label>
          <input type="text" class="form-control" ng-model="address">
          </input>
        </div>
        <button ng-click="codeAddress(address)" type="submit" class="btn btn-default">実行</button>
      </form>
    </div>
  </div>
</div>

②スクリプト(js/map14.js)

var mapApp = angular.module('googleMapApp', ['google-maps','ui.bootstrap']);

mapApp.controller("MyCtrl", function ($scope) {

  angular.extend($scope, {
    map: {
      center: {
        latitude: 35.681382,
        longitude: 139.766084
      },
      options: {
        maxZoom: 20,
        minZoom: 3
      },
      zoom: 16,
      control: {},
      marker: {}
    },
    address: ''
  });

  $scope.codeAddress = function (address) {
    geocoder = new google.maps.Geocoder();
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        $scope.map.control.getGMap().setCenter(results[0].geometry.location);
        $scope.map.marker.latitude = results[0].geometry.location.lat();
        $scope.map.marker.longitude = results[0].geometry.location.lng();
      } else {
        alert('Geocodeは以下の理由で入力された住所を変換できませんでした: ' + status);
      }
    });
    return;
  };
});

③CSS

@import url('bootstrap/css/bootstrap.css');
.angular-google-map-container {
  height: 400px;
}

(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);
 
“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マップの他の記事の目次

関連記事の目次

コメントを残す

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