AngularJSを使ってGoogleマップ(2)地図上に複数のマーカーを表示する

AngularJSを使ったGoogleマップで地図上にマーカーを表示する方法についてです。

今回は、東京駅周辺の地図に3つのマーカーを表示してみます。各マーカーの位置情報(緯度、経度)をスクリプト内に記述して地上に表示させます。
 
(1)サンプルコード
 デモ表示へ
①HTML本文

<script type='text/javascript' src='http://www.example.com/wp/wp-content/themes/testtm/js/map2.js'></script>
<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">
          <marker-label content="m.title" anchor="0 30" />
        </marker>
      </google-map>
    </div>
    <div class="col-sm-6">
    </div>
  </div>
</div>

②スクリプト(js/map2.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: {},
      zoom: 16,
      markers: [
        {
          latitude: 35.681382,
          longitude: 139.766084,
          title: '東京駅'
        },
        {
          latitude: 35.682032,
          longitude: 139.762294,
          title: '和田倉門'
        },
        {
          latitude: 35.678354,
          longitude: 139.761028,
          title: '馬場先門'
        }
      ]
    }
  });
});

③CSS

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

(2)サンプルコードの内容
 
1)マーカーの定義(スクリプト)
 
スクリプト内でmap.markers内に各マーカーの情報を配列で定義します。位置情報とマーカーのラベルのタイトルを定義しています。
 
2)マーカーの表示(HTML)
 
・google-mapタグ内にmarkerタグを記述します。
 
・AngularJSの”ng-repeat”を使ってスクリプト内の”markers”から複数のマーカー情報を取り出し、個々のマーカーを表示しています。
 
・”coords”属性で位置情報を指定しています。
 
・markerタグ内にmarker-labelタグを記述し、各マーカーのラベルを表示しています。
 
・marker-labelタグのanchor属性に指定した値で、ラベルの文字列を表示する位置を制御しています。
 
※markersタグを使って複数のマーカーを表示する場合
 
上記2)では、AngularJSの”ng-repeat”を使って複数のラベルを表示していましたが、markersタグを使って複数のマーカーを表示する事も出来ます。次のように記述します。
 
<markers models=”map.markers” coords=”‘self'” labelContent=”‘title'” labelAnchor=”22 0″ >
</markers>
 
markerタグと”ng-repeat”を使う2)の方法よりこちらの方が性能上は有利のようです。
 
 
AngularJS、Googleマップの他の記事の目次

関連記事の目次

コメントを残す

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