ショコラ
グーグルマップ 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