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

ヨッチ

こんにちは。代表のヨッチです。
ミライヨッチにお越しいただき、ありがとうございます。

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

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

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

このページの目次

Googleマップで指定した場所の地図を埋め込む方法【3つの手順】
【まとめ】Googleマップは簡単に埋め込むことができる

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

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

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

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

【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>

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