2019年12月15日

GoogleMapをiframeで埋め込む時に縮尺を調整する方法

GoogleMapを埋め込む。かつてはiframeを利用した埋め込みから、APIを利用した埋め込みになり、API用のKeyが必要なかったり必要だったり、といった経緯の末、近年ではまたiframeでの埋め込みに戻ってきた感じがありますね。

GoogleMapの埋め込み方は簡単で、GoogleMapで表示したい位置にした状態で、「共有」->「地図を埋め込む」としてHTMLをコピーすればOK

iframeにwidthやheightが指定されているので、これらは削除してCSSで指定するのが良し。しかしこの状態だと、地図自体はかなり縮小された状態で表示されてしまうので、もう少し拡大させてたいなと思う状態。

今回はiframeでGoogleMapを埋め込んだ際に、初期表示の縮尺を指定する方法をご紹介します。

通常の場合

まずそのまま埋め込んでみると、表示はこのようになります。

iframeのソースを見ると、ビックリマークで区切られたような不思議なURLになっています。この中の「!4f13.1」が縮尺を指定するための数値。「13.1」となっている個所を1~180(拡大~縮小)というように変更することで縮尺を変更できます。

拡大してみた例

!4f5

!4f1

縮小してみた例

!4f120

!4f180

現実的には初期~5くらいでしょうか。180までいくともはや使いどころがわからない。しかし細かく指定できるのは助かりますね。

以上、GoogleMapをiframeで埋め込む時に縮尺を調整する方法でした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です