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= 縮尺
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>
実際の表示
コメント