google mapの地図の縮尺を自由に変えたいなぁ…
というわけで今回は、Google mapの地図の拡大率を変える方法です!
目次
Google mapの拡大率を変える
Google mapの埋め込みに関しては、以前の記事で取り扱っていますのでそちらをご覧ください↓
ここでは、埋め込みたいサイズ(小・中・大・カスタム)を選んで埋め込むことができますが
地図のサイズではなく拡大率(縮尺)を自由にしたい!というケースです。
埋込コードを修正する
まずは、こちらをご覧ください↓
See the Pen Googlemapの拡大率 by そす (@Sosgoyo) on CodePen.
いつもの大阪城ですね(笑)
今回手を加えるのは、埋め込みコードの中の1か所です。
【HTML】
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6561.46679757008!2d135.52228594610042!3d34.68667751378859!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6000e0cd5c283afd%3A0xf01d07d5ca11e41!2z5aSn6Ziq5Z-O!5e0!3m2!1sja!2sjp!4v1735265282303!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
上記はgoogle mapを埋め込む際に使うiframeです。今回触るのは上記のこの「4f13.1!」の部分です。↓
上記赤丸の部分です。ここの「13.1」の部分の数字を変えることで縮尺が変わります。
数字を小さくする ⇒ 拡大される
数字を大きくする ⇒ 縮小される
試しに13.1を3にして見ると…、
See the Pen Googlemapの拡大率 by そす (@Sosgoyo) on CodePen.
どうでしょう?縮尺が変わりましたね?
まとめ
というわけで今回は、Google mapの地図の拡大率を変える方法についてご紹介しました!
色々な数値を試してみてください♪