AngularJSを使ってGoogleマップ(1)google-mapディレクティブを使って地図を表示

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;
}

サンプルコードの内容
1)依存性の設定(スクリプト)
 
var mapApp = angular.module(‘googleMapApp’, [‘uiGmapgoogle-maps’]);
 
上記コードで下記を設定しています。
 
①モジュール名:’googleMapApp’
 
HTMLの<html ng-app=”googleMapApp”>と対応。
 
②このAngularJSのコードが依存するモジュール
 
ここでは、Googleマップのモジュールを使用しているので’uiGmapgoogle-maps’を設定します。
 
2)コントローラで地図の属性を設定(スクリプト)
 
①コントローラ名:”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
 
3)HTMLに<ui-gmap-google-map>タグを記述し、スクリプトと連携
 
ここでは、地図上をドラッグして地図を移動できるようにするためdraggable=”true”を指定しています。それ以外の属性はスクリプトと連携して反映させています。
 
4)HTMLのレイアウト
 
ブートストラップ3のグリッドを使ってレイアウトしています。2カラム構成で左のカラムに地図を表示するように設定しています。

関連記事の目次
VPSサーバーでスナップショットを取得
~障害に備え、リカバリーポイントを作成。
VPSサーバーにログインして、設定内容を確認
~グローバルIPアドレス確認、SSHキーを作成。
VPSサーバーにSSHでログイン
~Tera Term、SSH、公開鍵認証方式
yumコマンドで最新のパッケージにアップデート
~全パッケージを最新にアップデート
Apacheのインストール
~yumコマンドでApacheインストール、iptablesでファイアウォールの設定
PHPとMySQLをインストール
~yumコマンドでPHP、MySQLインストール
WinSCPを使ってWordPressをアップロード
~WinSCPをクライアントPCにインストール、ファイルアップロード方法
WordPressをインストール
~MySQLでWordPress用データベース作成、wp-config.phpファイルの設定
CentOSのファイアウォール設定
~iptablesを使ってネットワークフィルタリング設定を一から行う
OpenSSHの設定をよりセキュアに
~ログイン制限、ポート変更、認証方式
ApacheでTCPのTraceメソッドを無効にする
~Apacheの設定変更、Telnetで動作確認
ヘッダーにApacheバージョンが表示されないようにする
~Apacheの設定変更、Telnetで動作確認
Apacheでディレクトリ内一覧表示を無効にする
~autoindex_moduleのロードを無効にする
セキュリティを考慮し、MySQLの匿名ユーザーにパスワードを設定、または削除
~MySQLの匿名ユーザーにパスワードを設定、または削除
PHPのバージョンが表示されないようにする
~php.iniの設定変更
WordPressディレクトリのパーミッションをセキュアに
~WordPress用ディレクトリの所有グループ、ユーザー、パーミッション設定
パーマリンク設定時のApache設定
~WordPressパーマリンクの設定、Apache .htaccessの設定
WordPressテーマの選定
~テーマ追加の特徴フィルターの項目、テンプレートキング
WordPressで画像のアップロード、サイズ調整、リンクを設定
~アップロード画像の画像サイズ、サムネイル、画像編集、リンク設定
更新可能なRPMパッケージのリストをメールで送信する
~yumコマンド、Bashスクリプト、Cron
Linuxでディスク使用量が多いディレクトリを調べる方法(1)
~du --max-depth
Linuxでディスク使用量が多いディレクトリを調べる方法(2)
~duコマンド、sortコマンド
WordPressデータベースのバックアップとリストア
~コマンドラインでバックアップ、リストア
WordPressのバージョンアップと旧バージョンへの戻し
~データベースとディレクトリのバックアップ、リストア
BashスクリプトでWordPressデータベースを自動バックアップ
~MySQLデータベースをBash、Cronを使って自動バックアップ、メール通知
BashスクリプトでDos攻撃など大量アクセスのログを検知
~Apacheアクセスログ、Dos、Cron、メール通知
テーマ作成
 
ブートストラップ3を使って自作テーマ作成
~Bootstrap3、自作テーマ作成、TwentyFourteen
Bootstrapのフリーのテーマを使ってデザインを簡単にカスタマイズ
~Bootstrap3のスタイルをカスタマイズ
 
WordPresssショートコード
 
簡単なショートコードを作ってみる
~ショートコードの作り方
ショートコードを使って関連記事のリンクを自動で挿入
~ショートコードの簡単なサンプル
ショートコードを使ってディレクトリ内のファイル名を取得し、投稿内にリンクを挿入
~カスタムフィールド利用、PHPで日本語文字列検索などのコーディング
 
AJAX、AngularJSなどその他応用
 
WordPress投稿内でAngularJSを使用
~AngularJS、Bootstrap、アコーディオン
Bootstrap3で作成したナビゲーションメニューをAngularJSに変更
~AngularJS、Bootstrap、自作テーマheder.php
WordPressでAngularJSを使ったGoogleマップを使えるようにする
~AngularJSを使って投稿内にGoogleマップ

コメントを残す

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