目次
はじめに
以前から撮影した写真をWordPressの投稿記事内でGoogleMapに埋め込んで管理していたが，設定方法等を整理しておく。
使用プラグイン
GoogleMapに写真を埋込できるプラグインはいくつかあるみたいだが，自分は導入当初から「Easy Google Maps（簡単 Google マップ）」を使用している。特に理由はない。
Google API Key の取得
Google API KeyはGoogleのサービスを使用するための認証キーとなる。
Google Maps Platformの[認証情報]ページからAPIキーを作成する。
下記画面の 「認証情報」ページに移動 から作成画面に入る。
APIキーを作成する画面
認証情報画面
認証情報ページの「プロジェクトの作成」−「新しいプロジェクト」画面からプロジェクト名を入力し「作成」押下
新しいプロジェクト画面
Google Maps Platform画面
作成ボタン押下後，画面展開されてポップアップ画面が表示されてAPIキーが表示される。
既に別プロジェクトが登録されておらず新規の場合は「請求先アカウントの管理」から入力が必要。
APIキーを保護する画面
「Google Maps Platformに移動」で
「APIキーを保護する」画面がポップアップするので必要事項を入力する。
ようこそ画面
「キーを制限」で 「ようこそ」画面が表示されるがスキップでよい。
Google Maps PlatformでAPIキーを作成したので次にWordPressプラグイン「Easy Google Maps（簡単 Google マップ）」にAPIキーを設定する。
「Easy Google Maps」の設定
APIキー設定
「Easy Google Maps」の「Settings」画面でUser API Key欄に入力後，「Save」押下
地図の登録
地図初期表示エリアを設定
「Easy Google Maps」の「Add Maps」画面を表示する。
初期地図画面はニューヨーク周辺が表示されているので，「Ctrl」キーを押しながらマウスホイールを回して地図を縮小する。「Ctrl」キーを押したまま日本周辺に移動(ドラッグ)させてマウスホイールで地図を拡大させて目的の地図を表示させる。
「Map Name」を入力してひとまず「Save Map」で保存する。
マーカーの登録
「Markers」タブ右の 「New」をクリックすると，右の地図中心にアイコンが表示される。
アイコンをドラッグして目的の位置へ移動させる。
写真の登録
「Marker Name」欄に登録する写真名やスポット名等を入力
「メディアを追加」から登録する写真をメディアライブラリから選択する。
地図上のマーカーアイコンを「Upload Icon」からカスタマイズできる。
最後に「Save Marker」を押下してマーカーを保存する。
その他の設定
「Marker Category」をあらかじめ設定すればカテゴリー管理ができる。
Latitude(緯度) Longitude(経度)欄を指定すれば，目的のポイントにアイコンを表示できる。
WordPressの投稿画面に貼り付け
ショートコードをコピー
地図画面の右上にショートコードが表示されているのでコピーする。
投稿画面
WordPress投稿画面のゥィジェットからショートコードを選択する。
地図挿入位置にショートコードを貼り付ける。
完成地図
おわりに
今まではTheme: Catch Evolution Proで設定・使用して問題なかったが，THE THORで設定した際にWordPressの投稿記事の地図表示が表示枠に対して少し下にずれて表示される現象が発生した。カスタム登録のアイコンリンクは地図上の位置と合っているが，既設の表示リンクは地図とずれて1ｃｍ程度上でマウスポインターが変化する。👆