【WordPress】地図を配置する（WP Go Maps）

# 前回の記事

前回の記事では、パンくずリスト機能を付加しました。

https://qiita.com/raptony110/private/d73f745a4cd085f6f0fc

今回は、オフィスの所在地などの地図を表示してみましょう。

僕のAdvent Calendarを読み終わった人が、
「へぇ簡単なんだなぁ〜　自分もWordPress使ってサイト作ってみようかな〜」って思うあなたがそこにいたのなら、、、、
読むだけで、頭の中WordPress化しちゃったんだよッ！！！！

https://qiita.com/advent-calendar/2022/wordpress-output

# WP Go Mapsをインストールする
WordPress管理画面のプラグイン>新規追加メニューを開いて、プラグインの追加を行います。
検索窓に「WP Go Maps」と入力してWP Go Mapsをインストールし、有効化をおこなってください。
WP Go Mapsは一つの地図表示であれば、無料で利用することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/e47630a5-ce56-1726-86be-93e758be8500.png)
正常に有効化できたら、Mapsメニューを表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/0e9f809a-2e0a-3e74-2841-44fe441c5405.png)
こちらがインストール直後の設定内容ですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/2ae79844-3ed0-ab0e-31b1-5b1fb629d552.png)

# ピンの位置を設定する
ActionカラムになるEditボタンを押して設定を編集します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/9be0737b-d7be-1113-e93f-7759e0ed7fe5.png)
詳細メニューが展開されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/313a2296-3209-2e3d-e11d-f74a88ebf5f2.png)
Markersを開いて、同じくActionのカラムからEditボタンを押しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/fa74dd6d-c9c3-758d-f7da-3634207306d1.png)
ここにピンを刺したい住所やピンのアニメーションを選ぶことができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/b69c523b-3892-c521-1614-5cdb3cc28563.png)
今回は、例として東京駅を表示してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/b1b3b48f-ac8c-ada2-75de-e72b720356e6.png)
これで基本的設定は終わりですが、情報量が多すぎるので、縮尺やビジュアルを変更してみましょう。

# ビジュアルを設定する
WP Go MapsメニューのSettings>Generalを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/93b7149f-9d23-7f05-a681-c13f00576b9d.png)
- 縮尺の変更
    - Zoom Levelのバーを調整します。
- 要素位置の変更
    - MapAlignmentのドロップダウンで位置を指定します。
- 横幅の変更
    - Widthの数値と定義単位を変更します。
- 高さの変更
    - Heightの数値と定義単位を変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/95e2f164-71d7-3a99-b535-b8b7081ed0b1.png)
調整できたら右下のSaveMapボタンを押して、保存します。

次にテーマを変更します。
Settings>Themesメニューを開きます。Editorメニューで細かくカスタマイズすることもできますが、Presetsにあるパターンから選ぶこともできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/e6d123f8-71bf-fc2c-5b6d-8cdbb8b45154.png)
今回はPresetsから選択してみます。いくつかパターンがあるので、自分のサイトにあったイメージを選択しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/fcff66ef-1ada-660e-66a0-7ac9fb636b9a.png)
今回はピン位置をより強調したかったので、モノクロにしました。

# Webサイトに表示させる
ウィジェットが追加されていますので、そちらのウィジェットを追加したい位置に追加します。
私の場合は、フッターの1列目に設定してみます。
外観>ウィジェットメニューを開き、フッター1列目の＋ボタンを押します。
すべて表示ボタンを押して、ウィジェットの項目にWP Go Mapsの項目がありますので、選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/68a9e690-aac3-cfb5-46a2-80cafa93a331.png)
この状態で更新ボタンを押して設定を保存します。タイトルは入力しなくてもOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/4d592bd5-cd45-1eed-e2b1-d0d3cc301bf0.png)

では、サイトを確認してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/94c08ccf-37cd-798f-fc36-1e85b959aaae.png)
フッターにイメージ通りの地図が表示されたことを確認できました。

# おわりに
今回の記事で、地図をWebサイト上に表示する方法をみてきました。コーポレートサイトなどでは、地図を表示させたかったり、店舗紹介などでも使えると思います。

次回は、問い合わせフォームの設置方法を見ていきましょう！