Programing

WordPressにGoogleマップを埋め込む方法(初心者向け)

WordPressでサイト運営、ブログ運営をしている人の中には、場所を示すのに効率的なGoogleマップを埋め込みたいと考える人もいると思います。

Googleマップを埋め込むことによって、ユーザーは手軽に目的地の位置を把握できます。ただ、WordPressを始めたばかりだったり、そこまでの経験があまりなかったりすると、どのように埋め込んだら良いのか分からないという人もいるでしょう。

そこで今回は、WordPressに簡単にGoogleマップを埋め込む方法を解説します。初心者でも3分ほどで埋め込めるようになるので、ぜひ参考にしてみてください。

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

WordPressの記事にGoogleマップを埋め込みたい場合は、以下の2つのステップが必要です。

  1. Googleマップを開いてコードをコピー
  2. WordPressでマップを挿入したいページに挿入

それぞれの手順を詳しく解説します。

今回は東京タワーをこの記事に埋め込んでいきましょう。

①Googleマップを開いてコードをコピー

まずはGoogleマップで、「東京タワー」と検索します。

東京タワー

「東京タワー」と検索すると、こちらのページのようになります。

ページ左部分の「共有」ボタンを押しましょう。

東京タワーの地図を共有

こちらのウィンドウが出てくるため、「地図を埋め込む」タブをクリックして、この画面を開きましょう。

そこで「HTMLをコピー」のところをクリックしてコピーします。

ちなみに、「リンクを送信する」タブのすぐ下にある「中」というところを押すと、サイズを選べます。

※今回は「中」のまま進めていきます。

②WordPressでマップを挿入したいページに挿入

コピーが完了すると、以下のコードがコピーできます。

<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.7479754683673!2d139.743244215905!3d35.65858048019963!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1566926531428!5m2!1sja!2sjp” width=”600″ height=”450″ frameborder=”0″ style=”border:0;” allowfullscreen=””></iframe>

こちらのコードをWordPressに張り付ける作業に移りましょう。

Wordpressのタブ変更

「テキスト」タブに切り替えて、挿入したい箇所に、先ほどコピーしたコードをコピペします。

すると、以下のように、Googleマップが表示されます。

これにて、WordPress内に、Googleマップを挿入する作業は完了です。

ABOUT ME
アバター
Ryo
【複業家】会社員をしながら、web関連の事業を個人で行っています。SEOコンサル、Lステップ構築、ボイスパーカッション講師。