【WordPress】Googleマップで指定した場所の地図を埋め込む方法

ヨッチヨッチ

こんにちは!WordPressシステムマーケッターのヨッチです。
プロフィールを見る

WordPressには、簡単にGoogleマップの地図を埋め込むことができます。
縮尺を自由に変更したり、ロケーション情報を載せることも可能です。

店舗や観光地の紹介もできるので、やり方を覚えておくと便利ですよ。

この記事では、WordPressの記事にGoogleマップの地図を埋め込む方法を紹介しています。
今すぐ簡単に埋め込みができるので、さっそく試してみませんか?

Googleマップで指定した場所の地図を埋め込む方法【3つの手順】

では、ワードプレスに地図を埋め込む方法を3つの手順でまとめてお伝えします。

  1. Googleマップで場所を検索する
  2. 表示された場所を確認する
  3. ワードプレスに地図を埋め込む

たったこれだけなので、だれでも簡単に地図を表示できますよ。
ここでは、「東京タワー」の地図を表示する流れで説明していきますね。

【1】Googleマップで場所を検索する

まずGoogleマップを開いてから、載せたい場所を検索します。
左上の検索バーで、ロケーション名を入力しましょう。

検索バーでロケーション名を入力する

【2】表示された場所を確認する

検索すると、Googleマップ上で場所を確認できます。

Googleマップ上で場所を確認できる

場所があっているか確認できたら、縮尺を調整しましょう。

マップの縮尺を調整する方法

ワードプレスに埋め込む地図の縮尺は、Googleマップで表示されている大きさと同じです。
なので、拡大・縮小した地図を埋め込みたいときは、このステップで縮尺を調整しておきましょう。

地図を拡大する

上の画像のように拡大しておけば、拡大した地図が埋め込まれます。
逆に縮小すれば、縮小した地図が埋め込まれます。

地図を縮小する

自由に縮尺を変更できるので、あなたの希望する大きさに調整しましょう!

【3】ワードプレスに地図を埋め込む

縮尺を調整できたら、いよいよ地図を埋め込むためのコードを発行します。
ロケーション情報の「共有」をクリックしましょう。

「共有」をクリック

「地図を埋め込む」タブをクリックすると、埋め込みコードが表示されます。

「地図を埋め込む」タブをクリック

地図の表示サイズを選択する

埋め込みコードの左側に、表示サイズを選択するボックスがあります。

表示サイズを選択するボックスがある

それぞれ、以下のサイズに対応しています。

  • :400×300
  • :600×450
  • :800×600
  • カスタムサイズ:数値を自由に入力できる

基本的には、中サイズがちょうど良いように感じます。
あなたのサイトにあわせて、ベストなサイズを選択しましょう。

埋め込みコードをコピーする

サイズを決めたら、埋め込みコードをコピーします。
「HTMLをコピー」をクリックすると、コードが自動的にコピーされます。

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

埋め込みコードを貼り付ける

埋め込みコードをコピーしたら、そのまま記事に貼り付けましょう。

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.7479754683613!2d139.74324421571433!3d35.65858048019959!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1616123458307!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

これで記事に地図を埋め込むことができました!

Gutenberg(ブロックエディタ)で地図を埋め込む方法

ブロックエディタの場合は、そのままコードを貼り付けても地図が表示されません。

コードを貼り付けても地図が表示されない

そこで、次のような手順でコードを貼り付けます。

右上のメニューから、「コードエディター」を選択する

「コードエディター」を選択

表示されたエディターに埋め込みコードを貼り付ける

埋め込みコードを貼り付ける

右上のメニューから、「ビジュアルエディター」に戻す

「ビジュアルエディター」に戻す

これでブロックエディタにも地図を埋め込むことができます。
プレビューを開くと、問題なく表示されていることが確認できます。

地図が表示される

【まとめ】Googleマップは簡単に埋め込むことができる

ここまで、Googleマップを埋め込む方法について紹介してきました。

クラシックエディターはもちろん、ブロックエディタでも問題なく埋め込むことができます。
ロケーション情報を入れたり、縮尺を変更することも可能です。

自由度が高いうえに、見やすい地図を簡単に表示できるのは嬉しいですよね。
お店や観光地を紹介したいときに、大活躍してくれる機能です。

MEO(マップエンジン最適化)にも有効な施策なので、覚えておいて損はないですよ。
便利な機能を活用して、さらに使いやすいWEBサイトを目指してみませんか?

ヨッチヨッチ

最後まで読んでいただき、ありがとうございます!
こうしてブログでお会いできたご縁に感謝しています。