VPSサーバーでWebサイト公開 備忘録 ~Linux、MySQLからAJAXまで

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

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

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

サンプルコードの説明


 
1)マーカーの定義(スクリプト)
 
スクリプト内でmap.markers内に各マーカーの情報を配列で定義します。マーカーとIDと位置情報を定義しています。
angular.extend($scope, {
  map: {
//
    markers: [
      {
        latitude: 35.681382,
        longitude: 139.766084,
        id: 1
      },

 
2)マーカーの表示(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>
モバイルバージョンを終了