【プラグイン不要】WordPressでGoogleマップを埋め込む方法

3 min
WordPressでブログに地図を張り付ける

この記事では、WordPressで作成するブログに、Googleマップの地図を埋め込む方法を紹介します。

できあがりは下の様にブログの記事に地図を貼り付けることができるようになります。

マウスや指で地図を移動させることもできます。

例として、清水寺の場所を示す地図を埋め込んでみました。

私はWordPress初心者ですが、思っていたより簡単にできました。

パピックス

パピックス

知らないと難しそうな気がしておっくうになるんだよね

手順は次の通りです。

  • Googleマップで場所を検索して地図を表示する
  • Googleマップから地図のリンクを取得する
  • 取得したリンクをWordPressのテキストエディタに貼り付ける

他にも方法は色々あるようですが、この方法であればプラグインが不要で簡単なので、初心者の方におすすめです。

それでは手順を説明していきます。

手順はパソコンでの操作を前提としています

WordPressでGoogleマップを埋め込む方法

WordPressでGoogleマップを埋め込む方法について次の順番で説明していきます。

  1. Googleマップで場所を検索して地図を表示する
  2. Googleマップから地図のリンクを取得する
  3. 取得したリンクをWordPressのテキストエディタに貼り付ける

Googleマップで場所を検索して地図を表示する

今回は、京都の清水寺を例に、説明を進めていきます。

まず、Googleマップを開きます。

下のリンクをクリックすると、Googleマップが別ウィンドウで開きます。

開いたらこのページへ戻ってきて下さい。

Googleマップ

  1. Googleマップで、ブログに貼り付けたい場所の名前又は住所を入力します。
    今回は「清水寺」と入力します。
  2. 入力後、検索ボタン(虫眼鏡ボタン)をクリックします。
Googleマップ-検索

Googleマップから地図のリンクを取得する

地図が表示されたら、Googleマップから地図のリンクを取得します。

  1. ウィンドウ右側で、目的の場所が表示されていることを確認します。
    拡大・縮小、上下左右移動して希望の地図に調整して下さい。
  2. 希望する地図になったら、[共有]をクリックします。
Googleマップ-共有
  1. 表示された[共有]ウィンドウの、[地図を埋め込む]ボタンをクリックします。
Googleマップ-地図を埋め込む
  1. [HTMLをコピー]をクリックします。
Googleマップ-HTMLをコピー
  1. [HTMLをコピー]の左側にあるアルファベット文字列の背景色が青色になったことを確認します。
Googleマップ-リンクコピー完了

これで、この地図のリンク(上の図のアルファベット文字列)がクリップボードにコピーされました。

後は、WordPressのテキストエディタにこのリンクを貼り付ければ完了です。

取得したリンクをWordPressのテキストエディタに貼り付ける

取得した地図のリンクをWordPress上に貼り付ける手順を説明していきます。

まず、WordPressで[投稿の編集]画面を表示して下さい。

  1. 右上の[テキスト]をクリックし、テキストエディタへ切り替えます。
テキストエディタ選択
  1. 地図を貼り付けたい場所を選択します。
    今回は「清水寺の場所」という見出し(見出し2)の下に貼り付けますので、下図のカーソルの場所をクリックします。
    ポイント: テキストエディタに慣れていない人は、見出しを目印にすると探しやすいです。
  2. 地図のリンクを貼り付けます。
    キーボード入力する場合:[Ctrl]+[V]
    マウスから入力する場合 :[右クリック]→[貼り付け]
リンク挿入
  1. 地図のリンクが貼り付けられたことを確認します。
リンク挿入2
  1. 右上の[ビジュアル]をクリックし、ビジュアルエディタへ切り替えます。
ビジュアルエディタ選択
  1. ビジュアルエディタ上で、表示された地図を確認します。
地図確認

これで地図の貼り付けは、完了です。

パピックス

パピックス

簡単でしょ?

ペースト(貼り付け)操作さえ知っていればとても簡単です。

WordPressを使う人ならペースト操作を知っているとは思いますが、まだ知らない人はこちらの記事に説明していますのでご参考にどうぞ。

【Windows】パソコン初心者が最初に覚えたいショートカットキー コピー・ペースト(貼り付け)・カット(切り取り)

Googleマップの地図をブログで使う場合の注意

「Google マップ / Google Earth 追加利用規約」には、「禁止行為」としていくつか記載があります。

記載内容は都度更新されており変化しているようです。

まだ読んでいない方は読んでおきましょう。

Google マップ / Google Earth 追加利用規約

ちなみに、この記事で紹介した方法は、Googleの下記サイトに載っている方法なので問題ありません。

他のユーザーとマップやルートを共有する

まとめ

この記事では、WordPressで作成するブログに、Googleマップの地図を埋め込む方法を紹介しました。

プラグインなしで簡単にできる、初心者におすすめの方法です。

WordPressで地図を貼り付ける手順は次の通りです。

  1. Googleマップで場所を検索して地図を表示する
  2. Googleマップから地図のリンクを取得する
  3. 取得したリンクをWordPressのテキストエディタに貼り付ける

地図は、ブログでレストランや観光地などの、おすすめスポットを紹介する場合に活躍します。

ブログに訪れてくれた人にとっても、Googleマップの最新の情報と、操作性が得られるのはうれしい事ですね。

観光ブログやランチブログを書く場合は、電話番号をタップしたときに発信できるようにしておくと、ブログを見てくれた人の操作性がさらに上がって喜ばれます。

ご興味があればこちらの記事も読んで下さいね。

パピックス

パピックス

3姉妹の父。会社員ブロガーです。
アマゾンエコーやアマゾンミュージックなど家族で楽しめる記事をメインにお届けします。
ご依頼・ご質問は問い合わせフォームよりお願いします。

FOLLOW

カテゴリー:
関連記事

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です