今回はWordPressにGoogle Map(グーグルマップ)を簡単に表示する方法をわかりやすく紹介していきます。
皆さんは普段からGoogle Mapって使ってますでしょうか?会社名や住所からその周辺の地図を表示するだけでなく、目的地までの経路をわかりやすく表示することもできるため、その利便性の高さから普段からGoogle Mapを使っている方も少なくないと思います。
運用されているWordPressのWebサイト上でGoogle Mapと同じ地図情報が表示されたら便利ですよね!
お店や会社の所在地情報を文字だけでなく、視覚的にわかりやすく伝えることで、よりわかりやすいページになります。
それでは、さっそくGoogle Mapの下記機能をWordPressで作られたWebサイトに載せる方法をみていきましょう。
Google MapをWebサイトに埋め込んで使用するにあたって禁止されている行為がありますので、事前に確認をしておく必要があります。
https://support.google.com/maps/answer/144361?co=GENIE.Platform%3DDesktop&hl=ja
1.地図情報
WordPressへのGoogle Map利用は基本下記ステップですすめます。
【STEP1】Google Mapで必要情報の検索
【STEP2】Google Mapでコードの取得
【STEP3】WordPressへ取得コード埋め込み
【STEP1】Google Mapで必要情報の検索
まず、ブラウザでGoogle Mapを開き、表示したい地点を住所や会社名等を入力して表示します。
![Google Map](https://academy.gmocloud.com/wp/wp-content/uploads/2020/08/map2.png)
【STEP2】Google Mapでコードの取得
Google Mapで検索した地図情報からホームページへ表示するために必要となる「コード」を取得します。
共有をクリックします。
![Google Map](https://academy.gmocloud.com/wp/wp-content/uploads/2020/08/map3.png)
リンクを送信するなら使ったことがある方もいると思いますが、今回は「地図を埋め込む」をクリックします。
![Google Map](https://academy.gmocloud.com/wp/wp-content/uploads/2020/08/map4.png)
![Google Map](https://academy.gmocloud.com/wp/wp-content/uploads/2020/08/map5.png)
「中」と書かれている部分をクリックして、埋め込む地図のサイズを選択します。
今回は小さくしたいので「カスタムサイズ」を選択します。
![Google Map](https://academy.gmocloud.com/wp/wp-content/uploads/2020/08/map6.png)
数値を入力してサイズを決定します。
![Google Map](https://academy.gmocloud.com/wp/wp-content/uploads/2020/08/map7.png)
「実サイズでプレビュー」をクリックすると、実際のサイズのマップがポップアップで出てきます。
![Google Map](https://academy.gmocloud.com/wp/wp-content/uploads/2020/08/map8.png)
「HTMLをコピー」をクリックすることで、クリップボードに埋め込みようのコードがコピーされます。
![Google Map](https://academy.gmocloud.com/wp/wp-content/uploads/2020/08/map9.png)
【STEP3】WordPressへ取得コード埋め込み
今回はWordPressの投稿内の「ブロック追加」機能にて地図情報を追加します。
WordPressの「投稿」より新規または既存の投稿ページより赤で囲んだ部分「ブロック追加」から地図情報を埋め込み追加します。
![Google Map](https://academy.gmocloud.com/wp/wp-content/uploads/2020/08/map10.png)
![Google Map](https://academy.gmocloud.com/wp/wp-content/uploads/2020/08/map11.png)
マウスカーソルを重ねると「ブロックの追加」と表示されるのでクリックします。
![Google Map](https://academy.gmocloud.com/wp/wp-content/uploads/2020/08/map12.png)
出てきた中から「カスタムHTML」を選択します。
![Google Map](https://academy.gmocloud.com/wp/wp-content/uploads/2020/08/map13.png)
「HTMLを入力...」の部分に、先ほどGoogle Map「HTMLをコピー」よりコピーしたコードを張り付けます。
![Google Map](https://academy.gmocloud.com/wp/wp-content/uploads/2020/08/map14.png)
![Google Map](https://academy.gmocloud.com/wp/wp-content/uploads/2020/08/map15.png)
全体としてはこのようになります。
![Google Map](https://academy.gmocloud.com/wp/wp-content/uploads/2020/08/map16.png)
画面上部の「プレビュー」をクリックすると
![Google Map](https://academy.gmocloud.com/wp/wp-content/uploads/2020/08/map17.png)
実際の投稿された状態を見ることができます。
地図そのものは拡大縮小の他、画面いっぱいに拡大地図を表示することもできます。
![Google Map](https://academy.gmocloud.com/wp/wp-content/uploads/2020/08/map18.png)
2.ストリートビュー
次に地図の代わりにストリートビューを挿入してみましょう。
ステップについては「1.地図情報」と同じになります。
【STEP1】Google Mapで必要情報の検索
ブラウザでGoogle Mapを開き必要情報を検索します。
【STEP2】Google Mapでコードの取得
地図の道路の部分で右クリックします。
![Google Map](https://academy.gmocloud.com/wp/wp-content/uploads/2020/08/map19.png)
出てきたメニューの「この場所について」をクリックします。
![Google Map](https://academy.gmocloud.com/wp/wp-content/uploads/2020/08/map20.png)
場所の情報が出てくるので、その中の写真をクリックします。
![Google Map](https://academy.gmocloud.com/wp/wp-content/uploads/2020/08/map21.png)
ストリートビューが表示されるので、左上の小さいウインドウのこの部分をクリックします。
![Google Map](https://academy.gmocloud.com/wp/wp-content/uploads/2020/08/map22.png)
![Google Map](https://academy.gmocloud.com/wp/wp-content/uploads/2020/08/map23.png)
出てきたメニューの「画像の共有または埋め込む」をクリックします。
![Google Map](https://academy.gmocloud.com/wp/wp-content/uploads/2020/08/map24.png)
出てきたメニューの「地図を埋め込む」クリックします。
![Google Map](https://academy.gmocloud.com/wp/wp-content/uploads/2020/08/map25.png)
最初と同様にサイズを選択します。
![Google Map](https://academy.gmocloud.com/wp/wp-content/uploads/2020/08/map26.png)
サイズを設定したら、「HTMLをコピー」を選択します。
![Google Map](https://academy.gmocloud.com/wp/wp-content/uploads/2020/08/map27.png)
【STEP3】WordPressへ取得コード埋め込み
先ほどと同様、投稿へ挿入します。
![Google Map](https://academy.gmocloud.com/wp/wp-content/uploads/2020/08/map28.png)
プレビューで実際の投稿と同じ画面を見ることができます。
もちろん、ストリートビューのカメラアングルの変更や道なりにすすむこともできます。
![Google Map](https://academy.gmocloud.com/wp/wp-content/uploads/2020/08/map29.png)
3.経路図
今度は経路図を投稿に挿入してみましょう。
地図情報」「2.ストリートビュー」と同じステップになります。
【STEP1】Google Mapで必要情報の検索
ブラウザでGoogle Mapを開き必要情報を検索します。
【STEP2】Google Mapでコードの取得
Google Mapで目的地を表示し「ルート・乗換」をクリックします。
![Google Map](https://academy.gmocloud.com/wp/wp-content/uploads/2020/08/map30.png)
出発地点を入力してルートを表示したら、三本線をクリックします。
![Google Map](https://academy.gmocloud.com/wp/wp-content/uploads/2020/08/map31.png)
出てきたメニューから「地図を共有または埋め込む」をクリックします。
![Google Map](https://academy.gmocloud.com/wp/wp-content/uploads/2020/08/map32.png)
先ほどと同様に「地図を埋め込む」をクリックしたあと、サイズを決定し「HTMLをコピー」を選択します。
![Google Map](https://academy.gmocloud.com/wp/wp-content/uploads/2020/08/map33.png)
【STEP3】WordPressへ取得コード埋め込み
同様にWordPressの投稿に挿入してプレビューを押した状態です。
ルートを拡大表示することもできます。
![Google Map](https://academy.gmocloud.com/wp/wp-content/uploads/2020/08/map34.png)
まとめ
いかがでしたか?
意外に簡単だったと思います、今回は投稿に挿入しましたが、WordPressの固定ページにも挿入することが可能ですので、いろいろと試してみてください。