AngularJSを使ってGoogleマップ(3)マーカーをクリックして情報ウィンドウを表示

地図上に表示されているマーカーをクリックすると情報ウィンドウが表示されるようにします。

前回地図上に複数のマーカーを表示させましたが、そのマーカーをクリックすると情報ウィンドウが表示されるように修正します。
 
(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"
      >
        <markers models="map.markers" coords="'self'" click="'onClicked'" labelContent="'title'" labelAnchor="22 0" >
          <windows show="'showWindow'" closeClick="'closeClick'">
            <p ng-non-bindable>緯度,経度 {{ latitude | number:4 }}, {{ longitude | number:4 }}</p>
            <p>マーカーの情報ウィンドウ</p>
          </windows>
        </markers>
      </google-map>
    </div>
    <div class="col-sm-6">
    </div>
  </div>
</div>

②スクリプト(js/map3.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,
      markers: [
        {
          latitude: 35.681382,
          longitude: 139.766084,
          showWindow: false,
          title: '東京駅'
        },
        {
          latitude: 35.682032,
          longitude: 139.762294,
          showWindow: false,
          title: '和田倉門'
        },
        {
          latitude: 35.678354,
          longitude: 139.761028,
          showWindow: false,
          title: '馬場先門'
        }
      ]
    }
  });
  angular.forEach($scope.map.markers, function (marker) {
      marker.closeClick = function () {
          marker.showWindow = false;
          $scope.$apply();
      };
      marker.onClicked = function () {
          marker.showWindow = true;
          $scope.$apply();
      };
  });
});

③CSS

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

(2)サンプルコードの内容
 
①markersタグにclick属性追加(HTML)
 
マーカーをクリックした際に実行する関数を指定します。この関数でウィンドウの非表示から表示に変更します。
 
②markersタグ内にwindowディレクティブ追加(HTML)
 
markersタグ内にwindowディレクティブ追加し、show属性とcloseClick属性でウィンドウの表示、表示したウィンドウのクローズを制御します。
 
③ウィンドウを表示する関数、表示されているウィンドウを閉じる関数を定義(スクリプト)
 
 
AngularJS、Googleマップの他の記事の目次

関連記事の目次

コメントを残す

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