AngularJSを使ってGoogleマップ（１）google-mapディレクティブを使って地図を表示 | VPSサーバーでWebサイト公開　備忘録　~Linux、MySQLからAJAXまで

AngularJSを使ってGoogleマップを表示する方法についてです。
　
WordPressの投稿本文にGoogleマップを表示するために必要な環境設定については下記記事を参照下さい。
WordPressでAngularJSを使ったGoogleマップを使えるようにする

今回は、東京駅周辺の地図を表示し、Googleマップの下記設定の仕方についてまとめました。
　
・地図のズームを指定
・地図のコントロールアイコン（移動、ズーム、ストリートビューなど）の表示
・地図のタイプ（ロードマップ、航空写真、地形など）
　
※目次をクリックすると目次の下部にコンテンツが表示されます。

１．サンプルコード
２．サンプルコードの内容

サンプルコード

①HTML本文

<script type='text/javascript' src='http://www.example.com/wp/wp-content/themes/testtm/js/map1.js'></script>
<div class = "container" ng-controller="MyCtrl">
  <div class="row">
    <div class="col-sm-6">
      <ui-gmap-google-map id="map-canvas" center="map.center" zoom="map.zoom" draggable="true" options="map.options">
      </ui-gmap-google-map>
    </div>
    <div class="col-sm-6"></div>
  </div>
</div>

　
②スクリプト（js/map1.js）

var mapApp = angular.module('googleMapApp', ['uiGmapgoogle-maps']);
mapApp.config(
    ['uiGmapGoogleMapApiProvider', function(GoogleMapApiProviders) {
        GoogleMapApiProviders.configure({
          key: 'your Google Map api key',
          v: '3', //defaults to latest 3.X anyhow
          libraries: 'weather,geometry,visualization'
        });
    }]
);

mapApp.controller("MyCtrl",['$scope', 'uiGmapGoogleMapApi', function ($scope,uiGmapGoogleMapApi) {
  angular.extend($scope, {
    map: {
      center: {
        latitude: 35.681382,
        longitude: 139.766084
      },
      zoom: 14,
      bounds: {},
      events: {},
      options: {
        panControl: true,
        zoomControl: true,
        mapTypeControl: true,
        scaleControl: true,
        streetViewControl: true,
        overviewMapControl: true,
        rotateControl: true,
        maxZoom: 20,
        minZoom: 10,
        mapTypeId: 'terrain'
      }
    }
  });
  uiGmapGoogleMapApi.then(function(maps) {});
}]);

　
③CSS

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

サンプルコードの内容

１）依存性の設定（スクリプト）
　
var mapApp = angular.module(‘googleMapApp’, [‘uiGmapgoogle-maps’]);
　
上記コードで下記を設定しています。
　
①モジュール名：’googleMapApp’
　
HTMLの<html ng-app=”googleMapApp”>と対応。
　
②このAngularJSのコードが依存するモジュール
　
ここでは、Googleマップのモジュールを使用しているので’uiGmapgoogle-maps’を設定します。
　
２）コントローラで地図の属性を設定（スクリプト）
　
①コントローラ名：”MyCtrl”
　
HTMLの<div ng-controller=”MyCtrl”>と対応。
　
②地図の中心、ズームの初期値を設定（スクリプト）
　
map.center、map.zoomで設定しています。
　
③マップオプションでマップタイプを設定（スクリプト）
　
map.mapTypeIdで設定しています。
　
サンプルコードでは、’terrain’を指定しています。下記マップタイプがあります。
　
・ROADMAP
Googleマップの通常のデフォルト。2Dタイル上で表示される。
　
・SATELLITE
航空写真
　
・HYBRID
航空写真で主要な対象物（道路、地名、建物）の名称が表示される。
　
・TERRAIN
物理的な起伏を示すタイルで、高度や水系の対象物（山、河川など）を表示。山では等高線が表示。
　
④マップオプションでコントロールの表示有無を設定（スクリプト）
　
下記コントロールのリンク、アイコンを地図上に表示するか設定します。
　
・panControl
東西南北の矢印のリンクで地図を移動するボタンが表示
　
・zoomControl
ズームを変更するスライダまたは+ボタンが表示される。
　
・mapTypeControl
ROADMAPやSATELLITEなどのマップタイプを切り替えるチェックボックスを表示
　
・scaleControl
地図のスケール（距離）を示す要素が表示
　
・streetViewControl
ペグマンアイコン（人の形をしたアイコン）を地図上にドラッグして、ストリートビューを有効にする
　
・overviewMapControl
広い領域内での現在の地図のビューポートを示すサムネイル概観マップ
　
・rotateControl
傾斜の付いた画像を持つ地図を回転
　
※マップタイプ、コントロール以外のマップオプションは下記参照
https://developers.google.com/maps/documentation/javascript/reference#MapOptions
　
３）HTMLに<ui-gmap-google-map>タグを記述し、スクリプトと連携
　
ここでは、地図上をドラッグして地図を移動できるようにするためdraggable=”true”を指定しています。それ以外の属性はスクリプトと連携して反映させています。
　
４）HTMLのレイアウト
　
ブートストラップ３のグリッドを使ってレイアウトしています。２カラム構成で左のカラムに地図を表示するように設定しています。

関連記事の目次

VPSの開始からWebサイト公開、運用

VPSにログイン、SSH接続、初期設定