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

今回は、東京駅周辺の地図に３つのマーカーを表示してみます。各マーカーの位置情報（緯度、経度）をスクリプト内に記述して地上に表示させます。
　
デモとコードサンプルはこちら。
　

サンプルコードの説明

　
１）マーカーの定義（スクリプト）
　
スクリプト内でmap.markers内に各マーカーの情報を配列で定義します。マーカーとIDと位置情報を定義しています。

angular.extend($scope, {
  map: {
//
    markers: [
      {
        latitude: 35.681382,
        longitude: 139.766084,
        id: 1
      },

　
２）マーカーの表示（HTML）
　
・ui-gmap-google-mapタグ内にui-gmap-markerタグを記述します。
　
・AngularJSの”ng-repeat”を使ってスクリプト内の”markers”から複数のマーカー情報を取り出し、個々のマーカーを表示しています。
　
・”coords”属性で位置情報を指定しています。

<ui-gmap-google-map id="map-canvas" center="map.center" zoom="map.zoom" draggable="true" options="map.options">
  <ui-gmap-marker ng-repeat="m in map.markers" coords="m" idkey="m.id">
  </ui-gmap-marker>
</ui-gmap-google-map>

関連記事の目次