GoogleMapのズームレベルを変更

GoogleMapのズームレベルを調整してWebページ内に地図を埋め込む方法。

スカイツリーのマップを使って検証してみます。

GoogleMapを拡大・縮小してからコードを生成する方法

GoogleMapで対象施設を表示してから拡大・縮小します。その後、地図埋め込み用のHTMLコードを生成して地図を表示します。

縮小してコード生成

スカイツリーの地図を縮小して表示します。

「共有」からHTMLコードを生成して「HTMLをコピー」を選択します。

コードを貼り付けて表示します。

拡大してコード生成

スカイツリーの地図を拡大して表示します。

「共有」からHTMLコードを生成して「HTMLをコピー」を選択します。

コードを貼り付けて表示します。

コードの数値を変更して対応する方法

コード内の「!4f13.1」の「13.1」部分を変更してズームレベルを調整します。数値が小さいと詳細表示（拡大）、数値が大きいと広域表示（縮小）されます。

<iframe src=”https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d3239.6558315567095!2d139.8085918261552!3d35.71008612838782!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1z44K544Kr44Kk44OE44Oq44O8!5e0!3m2!1sja!2sjp!4v1761092500866!5m2!1sja!2sjp” width=”800″ height=”400″ style=”border:0;” allowfullscreen=”” loading=”lazy” referrerpolicy=”no-referrer-when-downgrade”></iframe>

「!4f3」で表示

<iframe src=”https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d3239.6558315567095!2d139.8085918261552!3d35.71008612838782!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f3!2m1!1z44K544Kr44Kk44OE44Oq44O8!5e0!3m2!1sja!2sjp!4v1761092500866!5m2!1sja!2sjp” width=”800″ height=”400″ style=”border:0;” allowfullscreen=”” loading=”lazy” referrerpolicy=”no-referrer-when-downgrade”></iframe>

「!4f100」で表示

<iframe src=”https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d3239.6558315567095!2d139.8085918261552!3d35.71008612838782!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f100!2m1!1z44K544Kr44Kk44OE44Oq44O8!5e0!3m2!1sja!2sjp!4v1761092500866!5m2!1sja!2sjp” width=”800″ height=”400″ style=”border:0;” allowfullscreen=”” loading=”lazy” referrerpolicy=”no-referrer-when-downgrade”></iframe>