ワードプレス

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

 

質問者
質問者

WordPressの記事内にグーグルマップを埋め込む方法を教えてください。

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

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

Mino
Mino

こんな感じで簡単に埋め込むことができます。私の大好きな観光地「ダナン」の地図を挿入してみました!

特に、

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

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

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

Mino
Mino

今後ブログやホームページを始めるなら必ず使う機会があるので覚えておきましょう!

 

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

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

 

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

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

 

2. 「共有」をクリック

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

 

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

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

 

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

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

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

 

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

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

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

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

 

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

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

 

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

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

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

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

 

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

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

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

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

 

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

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

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

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

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

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

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

Mino
Mino

読者が満足させる記事を書ければ、SEOの観点から見てもあなたのサイトにもいい影響を与えるはずです!

 

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

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

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

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

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

ワードプレスの記事内にツイッターの投稿を埋め込む方法【画像付】 最近記事内にツイッターの投稿を埋め込む人をよく見かけませんか? その理由はいくつかあるのですが、ツイッター...
ワードプレスにインスタグラムの投稿写真を埋め込む2つの方法【画像付き】 今回はワードプレスの記事内にインスタグラムの投稿写真を埋め込む方法を紹介します。 インスタグラムの投稿を埋...
SEO対策に効果あり!ワードプレスの記事内にYoutubeの動画を埋め込む方法【画像付】 SEOの評価基準の1つに「記事の滞在時間」が含まれているのはご存知ですか? 「滞在時間が長い = じっくり読まれて...
Mino
Mino

使えるものはどんどん使ってブログやサイトに個人の色をだしていきましょう!