~Linux、MySQLからAJAXまでAngularJSを使ってGoogleマップ(1)google-mapディレクティブを使って地図を表示AngularJSを使ってGoogleマップを表示する方法についてです。WordPressの投稿本文にGoogleマップを表示するために必要な環境設定については下記記事を参照下さい。WordPressでAngularJSを使ったGoogleマップを使えるようにする今回は、東京駅周辺の地図を表示し、Googleマップの下記設定の仕方についてまとめました。・地図のタイプ(ロードマップ、航空写真、地形など)※目次をクリックすると目次の下部にコンテンツが表示されます。[‘uiGmapgoogle-maps’]);上記コードで下記を設定しています。ng-app=”googleMapApp”>と対応。2このAngularJSのコードが依存するモジュールここでは、Googleマップのモジュールを使用しているので’uiGmapgoogle-maps’を設定します。ng-controller=”MyCtrl”>と対応。2地図の中心、ズームの初期値を設定(スクリプト)map.center、map.zoomで設定しています。3マップオプションでマップタイプを設定(スクリプト)map.mapTypeIdで設定しています。サンプルコードでは、’terrain’を指定しています。下記マップタイプがあります。・ROADMAPGoogleマップの通常のデフォルト。2Dタイル上で表示される。・HYBRID航空写真で主要な対象物(道路、地名、建物)の名称が表示される。・TERRAIN物理的な起伏を示すタイルで、高度や水系の対象物(山、河川など)を表示。4マップオプションでコントロールの表示有無を設定(スクリプト)下記コントロールのリンク、アイコンを地図上に表示するか設定します。・zoomControlズームを変更するスライダまたは+ボタンが表示される。※マップタイプ、コントロール以外のマップオプションは下記参照https://developers.google.com/maps/documentation/javascript/reference#MapOptions3)HTMLに<ui-gmap-google-map>タグを記述し、スクリプトと連携ここでは、地図上をドラッグして地図を移動できるようにするためdraggable=”true”を指定しています。それ以外の属性はスクリプトと連携して反映させています。4)HTMLのレイアウトブートストラップ3のグリッドを使ってレイアウトしています。2カラム構成で左のカラムに地図を表示するように設定しています。関連記事の目次VPSの開始からWebサイト公開、運用VPSにログイン、SSH接続、初期設定VPSサーバーでスナップショットを取得~障害に備え、リカバリーポイントを作成。VPSサーバーにログインして、設定内容を確認~グローバルIPアドレス確認、SSHキーを作成。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。WordPressモバイルバージョンに。