グーグルマップ iframe版 をホームページに表示するには?APIキー無し。

ショコラ
ショコラ

グーグルマップ iframe版 をホームページに表示するには?APIキー無し。

iframe版 の グーグルマップ は、JavaScriptで操作できませんが無料です。ちょっとした地図の表示には使えます。
(注意)APIキー を使用しなくても グーグルマップ が表示できました。これは ハック なのでしょうか?
実は、グーグルマップ の前に OpenStreetMap を試しましたが、簡単にホームページに埋める込める対決では グーグルマップ の勝ちです。

もっさん先輩
もっさん先輩

↓こちらが グーグルマップ の「地図を埋め込む」からHTMLをコピーしたものです。属性で改行してあります。

<iframe
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.827853402551!2d139.7649307516492!3d35.68124053748008!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1661393963185!5m2!1sja!2sjp"
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen=""
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade">
</iframe>

↑この src にある pdパラメーター とは、いったい何なのでしょうか?
このパラメーターのせいで、一瞬、「グーグルマップはお金を払わないと使えないな」と勘違いしてしまいました。
結局、↓こちらの iframeタグを HTML に埋め込めば グーグルマップ を表示できることがわかりました。

<iframe
  width="100%"
  height="450"
  frameborder="0" style="border:0"
  referrerpolicy="no-referrer-when-downgrade"
  src="https://maps.google.com/maps?output=embed&hl=ja&t=m&q=35.6812405,139.7649308&z=18"
  allowfullscreen
  loading="lazy">
</iframe>

それでは、src の URLパラメーター の変えて、地図を確認してみようと思います。

outputパラメーター は embed 固定です。

output=embed

hlパラメーター は 言語。ja 固定にします。

hl=ja

tパラメーター は 地図表示タイプ。

地図(m)を指定する。

t=m

航空写真(k)を指定する。

t=k

qパラメーター で 緯度経度 を指定する。

q=35.6812405,139.7649308

qパラメーター で 住所 を指定する。

q=東京都新宿区西新宿2丁目8−1

qパラメーター で 場所 を指定する。

q=東京デズニーランド

パラメーター で ズーム を指定する。z=14 から z=18 のサンプルを用意しました。

z=14
z=15
z=16
z=17
z=18
Scroll to Top