2024.10.22

Googleマップをもっと見やすく！ズームレベルの設定方法

ENOWL_Nao

どうも、こんにちは。
Webデザイナーのなお（@ENOWL_Nao）です。

Googleマップのズームレベルを調整することで、表示範囲を広げたり、詳細な地図を表示したりすることができます！

今回は、Webサイトに埋め込んだGoogleマップのズームレベル（縮尺）を変更する方法を解説します。

この記事はこんな人にオススメ！

特定の場所を大きく表示したい
もっと広範囲の地図を表示させたい

この記事の見出し

ズームレベルを変更する手順
まとめ

ズームレベルを変更する手順

ステップ1: Googleマップのiframeを作成する

まず、GoogleマップをWebページに埋め込むためのiframeを作成します。

Googleマップで表示したい場所を検索し、「共有」からHTMLコードをコピーしてきましょう！

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.656784920611!2d139.80812547578913!3d35.710062672577926!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ed0d12f9adf%3A0x7d1d4fb31f43f72a!2z5p2x5Lqs44K544Kr44Kk44OE44Oq44O8!5e0!3m2!1sja!2sjp!4v1729580536796!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

Googleマップの埋め込み方法がわからない方は、過去に書いた記事を参考にしてみてください。

ステップ2: ズームレベルの変更

ズームレベルを変更するには、iframeのsrc属性内の!4f13.1という部分の数値を調整します。

この数値がズームレベルを表しています。

小さい数値 → 地図が拡大される（建物がよく見える）
大きい数値 → 地図が縮小される（広い範囲が見える）

初期状態

初期値：!4f13.1

小さい数値 → 地図が拡大される

初期値：!4f5

建物や道路が細かく表示されます。

大きい数値 → 地図が縮小される

初期値：!4f50

周辺地域まで一望できます。

まとめ

Googleマップのズームレベルを変更することで、地図の見え方を自由にカスタマイズできます。

iframeのsrc属性内の数値を調整するだけで、簡単に変更できるので、ぜひ試してみてください！

Xからの読者コメントをお待ちしています。
ブログ更新の励みになります！

個人事業主さまの「Web担当」

そのWebの悩み
一人で抱え込んでいませんか？

「ちょっとここを直したい」「そろそろリニューアルしたい」…。
小さな修正から本格的な制作まで、Webに関する「どうしよう」を私が丸ごと受け止めます。難しい専門用語は使いません。
あなたの事業を支えるパートナーとして、まずは気軽にお話ししませんか？

ココナラで相談する

#Googleマップ

私について

Googleマップをもっと見やすく！ズームレベルの設定方法