撮影場所をGoogle Mpaで埋め込む

概要

ポートフォリオサイトでは撮影情報も記載していますが、撮影場所を記載しただけではイメージし難いと思うのでGoogle Mapで場所を示すようにしています。

今回は「smple-map」プラグインを使用したGoogle Mapの表示方法にて記載しています。

手順

1.プラグインから「smple-map」をインストールして[ 有効化 ] します。

2.Google APIキーを設定します。

インストール後、画面の更新(ダッシュボード等を表示)するとメッセージが表示されます。

[ 設定ページ ] のリンクをクリックします。

推移後の画面で[ Google Maps APIs for web page. ] のリンクをクリックします。

[ キーの取得 ] をクリックします。　※Googleにログインが求められたら適切なアカウントでログインします。

『Maps Web APIの有効化』ダイアログが表示されます。

「Select or create project」のプルダウンをクリックして規定[ My Project ] を選択するか、任意のプロジェクト名を入力して [ ENABLE API ] をクリックします。

APIキーの作成が開始されます。

「YOUR API KEY」にAPIキーが出力されるので控えておきます。

WordPressに戻り「Set API Ket」に値を入力して [ 設定の保存 ] をクリックします。

『設定を保存しました。』と表示されていれば完了です。

使用方法

投稿する記事にショートコードを記載します。

ショートコードは、投稿モードを「テキスト」モードに変更して記載してください。
例として、「東京駅」のショートコードを貼り付ける場合は、次のコードを[ ]で括って記載してください。

[text]
map addr=”東京都千代田区丸の内１”
[/text]

投稿の「ビジュアル」ではショートコードの内容は反映しませんので、「プレビュー」で確認します。

実際に貼り付けた場合は以下のように表示されます。

住所がわかっている場合はピンポイントで指定できますが、いちいち住所を調べて設定するのも大変です

Googleが名称を認識しているなら、名称を指定して記載する事もできます。

[text]
map addr="東京駅"
[/text]

地図の大きさを調整する場合は[ zoom ]で微調整してみてください。

微調整しながらプレビューで確認して最適な大きさで設定します。

[text]
map addr="東京駅" zoom="13"
[/text]

[text]
map addr="東京駅" zoom="14"
[/text]

[text] map addr="東京駅" zoom="15" [/text]

「simple-map」はGPSレシーバーと組み合わせるととても便利です。