Googleマップの埋め込み

スマホでサイトを見せてもらったらGoogle Mapが表示されていなかった。
Google Maps Platform API Checkerで確認して、パソコンでは問題なかったが、
やっぱり実機で見ないとわからない。いろいろあるようだけど、
今度はAPIキーを使わず<iframe>で地図を埋め込む。
簡単なのはGoogleマップからHTMLをコピーして貼り付ければいい。


<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12937.823050276113!2d139.89555206861831!3d35.83782648015815!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60189b1a348f8a25%3A0x9ca0d50ef6afa63e!2z5Y2X5rWB5bGx6aeF!5e0!3m2!1sja!2sjp!4v1572447711524!5m2!1sja!2sjp” width=”100%” height=”300″ frameborder=”0″ style=”border:0;” allowfullscreen=””></iframe>

ただし、これだと左上の情報ウインドーが邪魔な気もするし、HTMLコードが複雑で
自分には応用が出来なかったりする。それで下記のようにしてみた。


<iframe src=”https://maps.google.co.jp/maps?output=embed&t=m&hl=ja&z=14&ll=35.8378265,139.9021181″ width=”100%” height=”300″ frameborder=”0″ style=”border:0;” allowfullscreen=”” scrolling=”no”></iframe>

これですっきりした。でもマーカーだけは付けたいと・・・やっぱり出来ないみたい。

そこで、マイマップを作って埋め込む。

いずれにしても一長一短あって
結論としては、用途に応じてよりよい表示方法を選ぶ。