グーグルマップ iframe版 をホームページに表示するには？APIキー有り。

/ 未分類 / By
ショコラ
ショコラ

グーグルマップ iframe版 をホームページに表示するには？APIキー有り。

iframe版 の グーグルマップ は、JavaScriptで操作できませんが無料です。ちょっとした地図の表示には使えます。
※すべての Maps Embed 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="600"
  height="450"
  frameborder="0" style="border:0"
  referrerpolicy="no-referrer-when-downgrade"
  src="https://www.google.com/maps/embed/v1/place?q=35.6812405,139.7649308&zoom=18&key=AIzaSyCtj0LD-hrJPmYEMKN0a_k-NbTzPmtXsaI"
  allowfullscreen
  loading="lazy">
</iframe>

keyパラメーター には グーグルクラウド で発行した APIキー を指定します。answorz.com 固有のもので他のサイトでは使用できません。

key=AIzaSyCtj0LD-hrJPmYEMKN0a_k-NbTzPmtXsaI

それでは、５つあるマップモードを確認してみようと思います。

マップモード毎に、指定できる URLパラメーター も変わります。

①PLACEモード

qパラメーター で マップマーカー の位置を指定して地図を表示します。

<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  referrerpolicy="no-referrer-when-downgrade"
  src="https://www.google.com/maps/embed/v1/place?q=35.6812405,139.7649308&zoom=18&key=AIzaSyCtj0LD-hrJPmYEMKN0a_k-NbTzPmtXsaI"
  allowfullscreen
  loading="lazy">
</iframe>

maptypeパラメーター に satellite を指定して地図を表示します。

<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  referrerpolicy="no-referrer-when-downgrade"
src="https://www.google.com/maps/embed/v1/place?maptype=satellite&q=35.6812405,139.7649308&zoom=18&key=AIzaSyCtj0LD-hrJPmYEMKN0a_k-NbTzPmtXsaI"
  allowfullscreen
  loading="lazy">
</iframe>

②VIEWモード

VIEWモード は PLACEモード と比べて、地図中央に マップマーカー が表示されません。qパラメーター もありません。

<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  referrerpolicy="no-referrer-when-downgrade"
  src="https://www.google.com/maps/embed/v1/view?center=35.6812405,139.7649308&zoom=18&key=AIzaSyCtj0LD-hrJPmYEMKN0a_k-NbTzPmtXsaI"
  allowfullscreen
  loading="lazy">
</iframe>

③DIRECTIONSモード

２点間の経路を表示できます。
東京駅 から お台場 まで 電車 を使った経路を表示します。

<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  referrerpolicy="no-referrer-when-downgrade"
  src="https://www.google.com/maps/embed/v1/directions?origin=東京駅&destination=お台場&key=AIzaSyCtj0LD-hrJPmYEMKN0a_k-NbTzPmtXsaI"
  allowfullscreen
  loading="lazy">
</iframe>

④STREETVIEWモード

ストリートビュー が表示できます。

<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  referrerpolicy="no-referrer-when-downgrade"
  src="https://www.google.com/maps/embed/v1/streetview?location=35.6812405,139.76493&key=AIzaSyCtj0LD-hrJPmYEMKN0a_k-NbTzPmtXsaI"
  allowfullscreen
  loading="lazy">
</iframe>

⑤SEARCHモード

地図で検索することができます。
キーワード「くら寿司」で検索してみます。

<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  referrerpolicy="no-referrer-when-downgrade"
  src="https://www.google.com/maps/embed/v1/search?q=くら寿司¢er=35.6812405,139.76493&zoom=12&key=AIzaSyCtj0LD-hrJPmYEMKN0a_k-NbTzPmtXsaI"
  allowfullscreen
  loading="lazy">
</iframe>
Scroll to Top