さて、今回は簡単に地図を設置できるプラグインのご紹介です。あまりにも有名なので説明が不要かと思いますが、簡単に説明しますと要は地図表示です。私はグーグルマップをプラグインでの表示はしたことなかったので今回初めて使ってみました。

基本的に使い方は簡単でしたがすべて英語というところがネックかもしれません。あとは表示させるだけならばAPIは必要ないのですがグーグルの機能を入れる場合はMaps JavaScript API取得は必須です。

普段はgmaps.jsというライブラリを使って表示させています。簡単に表示させるだけならプラグイン使った方が楽かもしれませんね。

• gmaps.js - Google Maps API with less pain and more fun
• WP Google Maps

---

WP Google Maps使い方

ワードプレスの管理画面からWP Google Mapsと検索してインストールします。

インストールできたら有効化するとMapsという項目が出てきます。

一番はじめだけ表示される画面です。青いボタンでSkip intro and create a mapをクリックして作成します。

Important NotificationにgoogleのMas APIを入力するところがありますが今回はなしで作成します。settingsをクリックして設定表示を見ます。

設定画面です。以下設定内容です。各項目必要なところを設定してください、とりあえずデフォルト設定にしておきます。

MAPS（地図）

Map Settings（地図の設定）

General Map Settings:一般的なマップ設定

• Disable Full Screen Control フルスクリーンコントロールを無効にする
• Disable StreetView ストリートビューを無効にする
• Disable Zoom Controls ズームコントロールを無効にする
• Disable Pan Controls パンコントロールを無効にする
• Disable Map Type Controls マップタイプコントロールを無効にする
• Disable Mouse Wheel Zoom マウスホイールズームを無効にする
• Disable Mouse Dragging マウスのドラッグを無効にする
• Disable Mouse Double Click Zooming マウスダブルクリックズームを無効にする

Troubleshooting Options:トラブルシューティングのオプション：

Over-ride current jQuery with version 1.11.3 (Tick this box if you are receiving jQuery related errors after updating to WordPress 4.5)

バージョン1.11.3で現在のjQueryをオーバーライドする（WordPress 4.5にアップデートした後にjQuery関連のエラーが発生した場合はこのボックスにチェックを入れる）

Do not load the Google Maps API (Only check this if your theme loads the Google Maps API by default)

Google Maps APIを読み込まないでください（テーマがデフォルトでGoogle Maps APIを読み込む場合のみチェックしてください）

Use FontAwesome: 4.* or 5.*

FontAwesomeを使用する： バージョン4かバージョン5

Maps Engine: Googlemap or OpenLayers

マップエンジン：グーグルマップ オープンレイヤーズ

Load Maps Engine API: Where required, Always, Only Front End, Only Back End, Never Maps Engine APIを読み込む：必要な場合、いつも、フロントエンドのみ、バックエンドのみ、読み込まない

Always include engine API on pages: Page IDs

常にエンジンAPIをページに含める： ページID

Always exclude engine API on pages: Page IDs

ページ上で常にエンジンAPIを除外する：ページID

Prevent other plugins and theme loading API:

他のプラグインやテーマ読み込みAPIの防止：

Lowest level of access to the map editor: Admin,Editor,Author,Contributor,Subscriber

マップエディタへの最低レベルのアクセス：管理者、編集者、著者、貢献者、加入者

Enable Usage Tracking: Allow us to anonymously track how you use your maps and we will send you a 15% Sola Plugins coupon as a token of our gratitude (Coupon will be sent to the administrator’s email address) 使用状況のトラッキングを有効にする：マップの使用方法を匿名で追跡できるようにし、15％Sola Pluginsクーポンを感謝の念としてお送りします（クーポンは管理者のメールアドレスに送信されます）

Disable Two-Finger Pan: Removes the need to use two fingers to move the map on mobile devices

Two-Finger Panを無効にする：モバイルデバイス上で地図を移動するために2本の指を使用する必要性を排除します

---

info window 情報ウィンドウ

Marker InfoWindow Settings（マーカーインフォウィンドウ設定）

Open Marker InfoWindows by Click or Hover マーカー情報ウィンドウを開く クリック ホバー

Disable InfoWindows

InfoWindowsを無効にする

---

Marker Listing マーカー一覧

Marker Listing Settings（マーカー一覧の設定[proバージョン設定]）

Changing these settings will alter the way the marker list appears on your website.

これらの設定を変更すると、ウェブサイトにマーカーリストが表示される方法が変わります。

Add Beautiful Marker Listings to your maps with the Pro version for only $39.99 once off. Support and updates included forever.

Proバージョンを使用してMapにBeautiful Marker Listingsを追加すると、39.99ドルで一度オフになります。 サポートとアップデートは永遠に含まれています。

---

Advanced Marker Listing（高度なマーカー一覧）

Column settings（列の設定）

• Hide the Icon column（アイコンの列を非表示にする）
• Hide the Title column（タイトル列を非表示にする）
• Hide the Address column（アドレス欄を非表示にする）
• Hide the Category column（カテゴリ列を非表示にする）
• Hide the Description column（説明列を非表示にする）

---

Carousel Marker Listing カルーセルマーカー一覧

Theme selection テーマ選択

Carousel settings カルーセルの設定

• Hide the Image（画像を非表示にする）
• Hide the Title（タイトルを隠す）
• Hide the Marker Icon（マーカーアイコンを非表示にする）
• Hide the Address（住所を隠す）
• Hide the Description（説明を隠す）
• Hide the Marker Link（マーカーリンクを非表示にする）

• Hide the Directions Link（ルートを非表示にする）

• Enable lazyload of images（イメージの遅延を有効にする）
• Enable autoheight（オートハイトを有効にする）
• Enable pagination（ページネゴシエーションを有効にする）
• Enable navigation（ナビゲーションを有効にする）
• Items（アイテム）
• Autoplay after x milliseconds (1000 = 1 second)（xミリ秒後の自動再生（1000 = 1秒））

---

Store Locator（店舗検索機能）

Store Locator Radii（ストアロケータ半径）

Use a comma to separate values, eg: 1, 5, 10, 50, 100 カンマを使用して値を区切り、1,5,10,50,100

Advanced Settings（高度な設定）

Google Maps API Key

This API key can be obtained from the Google Developers Console. Our documentation provides a full guide on how to obtain this.

このAPIキーはGoogle Developers Consoleから取得できます。 私たちのドキュメントは、これを得る方法の完全なガイドを提供しています。

Google Maps API Key (required) グーグルマップAPIキー（必須）

Marker Data Location（マーカーデータの場所）

We suggest that you change the two fields below ONLY if you are experiencing issues when trying to save the marker XML files.

マーカーXMLファイルを保存しようとするときに問題が発生した場合のみ、以下の2つのフィールドを変更することをお勧めします。

Pull marker data from（マーカーデータを引き出す）

Database (Great for small amounts of markers)

データベース（少量のマーカーの場合）

XML File (Great for large amounts of markers)

XMLファイル（大量のマーカーに最適）

Custom Scripts（カスタムスクリプト）

Custom CSS:カスタムCSS：

Custom JS:カスタムJS：

Developer Mode（開発者モード）

Always rebuilds combined script files, does not load combined and minified scripts

結合されたスクリプトファイルを常に再構築し、結合されたスクリプトとミニスクリプトを読み込まない

---

General Complicance（一般準拠）

Require consent before loading Maps API（Maps APIを読み込む前に同意する）

For more information about WPGM and GDPR compliance, please refer to our GDPR information page and our Privacy Policy

WPGMとGDPRのコンプライアンスの詳細については、GDPRの情報ページとプライバシーポリシーを参照してください。

---

主に設定する場所といえばMAPタブだけで十分です。mapにMy first mapというあらかじめ作られているものを編集します。editをクリックして編集画面に入ります。

Choose a maps engineというのが出てきますが、こちらはAPIのいらないOpenLayersをクリックします。

以下が編集画面です。

Create your Map（地図を作成する）

• General Settings（一般設定）
• Themes（テーマ）
• Directions（道案内）
• Store Locator（店舗検索機能）
• Advanced Settings（高度な設定）
• Marker Listing Options（マーカー一覧のオプション）
• Pro Upgrade（プロアップグレード）

上記タブがありますが一般設定だけでOKです。

その下に下記タブがありますがMarkersだけで良いです。

• Markers（マーカー）
• Advanced markers（高度なマーカー）
• Polygon（ポリゴン）
• Polylines（ポリライン）
• Heatmaps（ヒートマップ）
• Circles（サークル）
• Rectangles（長方形）

General Settings（一般設定）

Short code:[wpgmza id=”1”] copy this into your post or page to display the map

ショートコード：あなたの投稿やページにコピーして地図を表示する

Map Name: My first map

マップ名：最初のマップ

Width: 100% Set to 100% for a responsive map

幅：100％ レスポンシブ対応のマップの場合は100％に設定

Height:400px

高さ：400px

Zoom Level:スライダー

ズームレベル：スライダー

Map Alignment:left

地図の位置合わせ：左

Map type:roadmap,Satellite,Hybrid,Terrain

地図の種類：ロードマップ、衛星、ハイブリッド、地形

ズームレベルをスライダーで近づけてMarkersタブのAddress/GPS:に住所か建物名もしくは緯度・経度などを入力して登録します。

その下にYour Markersという項目で登録したマーカーが出てきますので複数登録したり表示確認や削除できます。東京スカイツリーと東京タワーを登録してみました。

あとはショートコードをコピーして表示させたいところにペーストするだけ。簡単ですね。

こんな風に表示させることが出来ます。

APIを入力する場合はsettingのMAPSのMap SettingsのMaps Engineをgoogle mapにする必要があります。そうすると上記にImportant Notificationが表示されAPI入力フォームが現れます。

もしくはadvancedタブにてGoogle Maps API Key (required)に入力すればOKです。

因みにAPIを有効にしても以下のようなエラーが出る場合はAPIキーの制限で現アドレスが対応していないことが考えられますのでGoogleAPIの認証アドレスを追加して5分後に確認すると良いでしょう。

プロ版だと以下のような機能があるようです。

プロフェッショナル版

• 複数のマップを作成する！
• 訪問者があなたのマーカーへの道順を取得できるようにする。
• あなたの地図マーカーに説明、リンク、画像を追加します。
• マップマーカーにカテゴリを追加する
• カテゴリ別マーカーをフィルタリングする
• 複数のマッシュアップマップ
• さまざまなマーカーアイコン、または独自のアイコンを追加して、地図を目立たせるようにしましょう！
• 4つの方法でマップマーカーを一覧表示します。基本リスト、基本テーブル、カルーセル、先進的なテーブル
• 訪問者に地図の場所を経路の開始点または終了点として使用させる
• デフォルトのGoogle Mapsインフォウィンドウと新しいモダンインフォウィンドウの間で選択する
• エクスポート/マーカーをCSVファイルにインポートして、素早く編集できます。
• フュージョンテーブルをGoogleマップにリンクする
• 地図上にあなたの訪問者の場所を表示する
• マップにKML / KMZファイルをインポートする
• ストアロケータの高度なオプション
• ユーザーが地図の場所を店舗ロケータに使用できるようにする
• カテゴリ別ストアロケータ検索
• ストアロケータの検索が完了するまで、すべての地図マーカーを非表示にする
• 地図ウィンドウ内でマーカーリストを移動する
• 複数のマップウィジェット機能
• 網膜レディマップマーカーアイコンを追加する
• ワードプレスネットワークフレンドリー
• WP Google Mapsプロフェッショナル版を$ 39.99で入手

参考になれば幸いです。

---

∞Tadashi Suyama∞