【初心者】ワードプレスの記事内にグーグルマップを埋め込む方法

 

最近は記事内にグーグルマップを挿入している記事をよく見るようになりました。

一見難しそうに思えるかもしれませんが、やり方はものすごく簡単で、好きな場所に地図を埋め込むことができます。

特に、

• 会社やお店のロケーション
• ブログで紹介したお店の住所

などを紹介する記事に多く、クリックするだけでグーグルマップと連動して道順を案内してくれるので、読者に取ってはありがたい機能です。

今回の記事では、グーグルマップをワードプレスで作成した記事内に挿入する方法を画像付きで紹介します。

 

グーグルマップを記事内に挿入する方法

今回は私が以前の留学時代お世話になったハワイの人気観光地「アラモアナ・ショッピングセンター」をサンプルに説明します。

 

1. グーグルマップで目的地を検索

まずはグーグルマップで目的地を入力しましょう。上記の画像は「アラモアナセンター」を検索した状態です。

 

2. 「共有」をクリック

「共有」ボタンをクリックします。

 

3. 「地図を埋め込む」をクリック

「地図を埋め込む」をクリックします。

 

5. 「HTMLをコピー」をクリック

デフォルトのサイズは「中」となっているので、設定はそのままで「HTMLをコピー」をクリックします。

※マップのサイズを変更する方法は後ほど紹介します。

 

6. 「テキスト」モードの投稿画面で貼り付け

ワードプレスの投稿画面でモードを「テキスト」に変更します。

マップを表示させたい場所にコピーしたコードを貼り付けます。

「ビジュアル」モードの状態でコードを貼り付けても文字列が表示されるだけなので気をつけてください。

 

7. グーグルマップが表示されていることを確認

上記のようにグーグルマップが表示されていれば成功です。

 

グーグルマップのサイズを変更する方法

グーグルマップのサイズを変更する方法は簡単です。

HTMLをコピーする画面のメニューにある「大・中・小・カスタムサイズ」の４サイズの中から好きなサイズを選ぶだけです。

「大・中・小」はプリセットサイズなので変更はできませんが、「プリセットサイズ」を選べば横幅と縦幅で好きなサイズに変更することができます。

 

グーグルマップはすでにレスポンシブ対応済

スマホの普及率が圧倒的に増えた今、レスポンシブ対応は気になるところでです。

ただ、グーグルマップについては心配いりません。

地図はそもそもレスポンシブ対応されており、特別な設定は一切必要ありません。ですので、コピーしたHTMLコードはそのまま使えば問題ありません。

 

グーグルマップを埋め込むメリット

記事内に地図を埋め込むことのメリットは主に以下の３つです。

• 読者が場所を検索しやすい
• 場所の写真見れて雰囲気が伝わる
• 口コミが簡単に見れる

まず、読者は記事の中にグーグルマップが挿入されている場合、数クリックするだけでその場所までの道順を示してくれます。

また、グーグルマップはその場所で撮影された写真も同時に見ることができます。特にお店などの場合、事前に写真で雰囲気が見れるのは読者にとって安心です。

私は今までマレーシア、タイ、ベトナム、ミャンマーなど様々な国を旅していますが、グーグルマップのおかげで世界中のどこにいても迷うことはありません。

観光地やレストランなどを記事で紹介する場合は必ずグーグルマップを挿入するようにしましょう。他の記事との差別化にも繋がり、読者にとってもメリットだらけです。

 

グーグルマップ以外にもいろいろ埋め込める

グーグルマップ以外にも、

• インスタグラム
• ツイッター
• ユーチューブ

などのSNSもワードプレスの記事内に埋め込むことができます。

やり方も簡単なので必要に応じて試してみてください。具体的なやり方は以下の記事で紹介しています。

https://ownedmedianoie.com/how-to-insert-twitter-feed-on-wordpress/

https://ownedmedianoie.com/how-to-insert-instagram-on-wordpress/

https://ownedmedianoie.com/how-to-insert-youtube-on-wordpress/