Googleマップの地図をブログやWebサイトに埋め込む

Google マップは自分の管理しているブログや Web サイトに埋め込むことができます。指定した位置の地図を表示できるだけでなく、埋め込まれた地図上で移動や縮尺の変更などの操作も行うことができます。ここでは Google マップの地図をブログやWebサイトに埋め込む方法について解説します。

(Last modified: )

Googleマップを埋め込む

Google マップをブログや Web サイトに埋め込む手順について解説します。最初に埋め込みたい地図の位置を Google マップで表示してください。縮尺の変更も行ってください。

Googleマップを埋め込む(1)

画面左上のメニューアイコンをクリックしてください。

Googleマップを埋め込む(2)

「地図を共有または埋め込む」をクリックしてください。

Googleマップを埋め込む(3)

「共有」画面が表示されたら「地図を埋め込む」タブをクリックしてください。

Googleマップを埋め込む(4)

地図の埋め込み用の画面が表示されます。この画面でも地図の移動や縮尺の変更が可能です。

Googleマップを埋め込む(5)

地図の左上に、埋め込むサイズを選択するドロップダウンメニューがあります。クリックしてサイズを選択してください。

Googleマップを埋め込む(6)

Googleマップを埋め込む(7)

「小」「中」「大」をそれぞれ選んだ場合の地図の大きさは次の通りです。「小」だと 400x300 、「中」だと 600x450 、「大」だと 800x600 のサイズに設定されます( 2021 年 5 月現在)。

Googleマップを埋め込む(8)

Googleマップを埋め込む(9)

Googleマップを埋め込む(10)

またカスタムサイズを選択した場合、幅と高さをピクセル単位で指定することができます。

Googleマップを埋め込む(11)

例えば 600 × 200 に設定してみます。どのように見えるのかを確認するには「実サイズでプレビュー」をクリックしてください。

Googleマップを埋め込む(12)

別のウィンドウが開き、先ほど指定したサイズで地図が表示されます。

Googleマップを埋め込む(13)

埋め込む地図のサイズの選択が終わりましたら「HTMLをコピー」をクリックしてください。埋め込み用のコードがクリップボードにコピーされます。

Googleマップを埋め込む(14)

今回取得したコードは次のようなものでした。(一部省略しています)。

<iframe src="https://www.google.com/maps/embed?pb=(省略)" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

それでは取得したコードをブログや Web サイトの記事に埋め込んでください。今回は Blogger で作成したブログの記事に埋め込んでみました。

Googleマップを埋め込む(15)

Googleマップを埋め込む(16)

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

記事に埋め込んだ地図は移動させたり縮尺を変えることもできますし、航空写真に切り替えることもできます。

Googleマップを埋め込む(17)

Googleマップを埋め込む(18)

-- --

Google マップの地図をブログやWebサイトに埋め込む方法について解説しました。

( Written by Tatsuo Ikura )

Profile
profile_img

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。