AngularJSを使ってGoogleマップ(4)マーカーでイベントを処理

地図上に表示されているマーカーでイベントを処理する方法についてです。

マーカーをダブルクリックするイベントを検知し、地図をズームアップし、地図の中心をマーカーの位置に移動するサンプルコードを作ってみました。
 
(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"
      >
        <marker ng-repeat="m in map.markers" coords="m" events="m.events">
          <marker-label content="m.title" anchor="0 30" />
        </marker>
      </google-map>
    </div>
    <div class="col-sm-6">
    </div>
  </div>
</div>

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

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

mapApp.controller("MyCtrl", function ($scope) {
  
  var onMarkerDblclickd = function (marker, eventName, args) {
    $scope.map.zoom = 17;
    $scope.map.center.latitude = marker.getPosition().lat();
    $scope.map.center.longitude = marker.getPosition().lng();
    $scope.$apply();
  }

  angular.extend($scope, {
    map: {
      center: {
        latitude: 35.681382,
        longitude: 139.766084
      },
      options: {
        maxZoom: 20,
        minZoom: 3
      },
      zoom: 15,
      markers: [
        {
          latitude: 35.681382,
          longitude: 139.766084,
          showWindow: false,
          title: '東京駅',
          events: {
            dblclick: function (marker, eventName, args) {
              onMarkerDblclickd(marker, eventName, args);
            }
          }
        },
        {
          latitude: 35.682032,
          longitude: 139.762294,
          showWindow: false,
          title: '和田倉門',
          events: {
            dblclick: function (marker, eventName, args) {
              onMarkerDblclickd(marker, eventName, args);
            }
          }
        },
        {
          latitude: 35.678354,
          longitude: 139.761028,
          showWindow: false,
          title: '馬場先門',
          events: {
            dblclick: function (marker, eventName, args) {
              onMarkerDblclickd(marker, eventName, args);
            }
          }
        }
      ]
    }
  });
});

③CSS

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

(2)サンプルコードの内容
 
1)markerタグにevents属性追加(HTML)
 
APIリファレンスを見るとmarkersタグにはevents属性の記述がなかったのでmarkerタグを使用しました。
 
2)マーカーで使用できるイベント
 
下記参照
https://developers.google.com/maps/documentation/javascript/reference#Marker
 
3)イベント検知時に実行する関数を定義
 
・地図のズームを17に変更します。
・マーカーの位置情報(緯度・経度)を取得し、その位置を地図の中心に設定します。

var onMarkerDblclickd = function (marker, eventName, args) {
  $scope.map.zoom = 17;
  $scope.map.center.latitude = marker.getPosition().lat();
  $scope.map.center.longitude = marker.getPosition().lng();
  $scope.$apply();
}

4)各マーカーのイベント定義に上記関数を設定

markers: [
  {
   :
    events: {
      dblclick: function (marker, eventName, args) {
        onMarkerDblclickd(marker, eventName, args);
      }
    }
  },

 
AngularJS、Googleマップの他の記事の目次

関連記事の目次

コメントを残す

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