ブログ備忘録 GoogleMap & MyMap埋込み方法

Blog
Blog
この記事は約4分で読めます。

Google マイマップの埋め込み方法の備忘録です。

Google My Maps 埋め込み方法

HTMLをコピーして「カスタムHTMLブロック」に貼り付けで特に特殊な設定はなし

<iframe src="https://www.google.com/maps/d/u/7/embed?mid=1P4Vrxe0xz2dQ9cTZznlgYdxOmcVQtTg&ehbc=2E312F" width="640" height="480"></iframe>

実際にこのように表示されます。

埋め込むHTLMのカスタマイズ

縮尺・地図の表示位置の指定

縮尺 : &z= 2-22の数字

表示位置 : &ll= 緯度,経度

ブログに表示するサイズの変更

width=”800” height=”450

&z= 縮尺

Google My Mapsで表示したい大きさに変更してURLを確認。

https://www.google.com/maps/d/u/7/edit?mid=1P4Vrxe0xz2dQ9cTZznlgYdxOmcVQtTg&ll=34.676478318536056%2C135.4918992853027&z=13

URLのこの部分「&z=13」を埋め込みURLに追記するだけ。

<iframe src=”https://www.google.com/maps/d/u/7/embed?mid=1P4Vrxe0xz2dQ9cTZznlgYdxOmcVQtTg&ehbc=2E312F&z=13” width=”800″ height=”450″></iframe>

z=は2-22の間で指定できるようです(拡大・縮小の度合い)

実際の表示

&ll= 表示位置

Google My Mapの編集画面で位置調整してからURLを確認。

https://www.google.com/maps/d/u/7/edit?mid=1P4Vrxe0xz2dQ9cTZznlgYdxOmcVQtTg&ll=34.676478318536056%2C135.4918992853027&z=13

URLのこの部分「&ll=34.67647…」と%2Cの後の「135.49…」を埋め込みURLに追記します。
%2C」の代わりにコンマを入れます。

<iframe src=”https://www.google.com/maps/d/u/7/embed?mid=1P4Vrxe0xz2dQ9cTZznlgYdxOmcVQtTg&ehbc=2E312F&ll=34.676478318536056,135.4918992853027&z=13″ width=”800″ height=”450″></iframe>

実際の表示

こちらの記事を参考にしました。

そのほかの引数

&noprof=1 マップオーナー情報非表示

<iframe src=”https://www.google.com/maps/d/u/7/embed?mid=1P4Vrxe0xz2dQ9cTZznlgYdxOmcVQtTg&ehbc=2E312F&ll=34.676478318536056,135.4918992853027&z=13&noprof=1” width=”800″ height=”450″></iframe>

実際の表示

&ehbc=2E312F

&femb=1

Google Map埋め込み

コメント

タイトルとURLをコピーしました