Web制作 コーディング マップ

Googleマップの拡大率をカスタマイズ(変更)する方法

Googleマップの拡大率を変える方法ない?

カンプからのコーディングの際、アクセス方法などのページでGoogleマップがある事が多いですが、マップの拡大率を調整したいことがあります。

その方法について解説します。

Googleマップを埋め込む方法

まずはGoogleマップを埋め込む方法ですが、まずGoogleマップを開いて地名か住所を検索します。

すると地図が表示されるので、次に共有をクリックします。

すると次の画面が表示されるので、最初はリンクを送信するになっているので地図を埋め込むを選択し、HTMLをコピーをクリックし、埋め込み用のコードをコピーします。

あとはそのコードをHTMLに貼り付ければOKです。

そして埋め込んだ地図がこちらになります。

かろうじて東に原宿駅が見えますが、もう少し広くして周辺地域が見れるようにしてみたいと思います。

 

Googleマップの拡大率を変更

Googleマップの拡大率を変更するには埋め込み用のコードの一部を変更します。

まずコードを見てみましょう。

<iframe
 src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.219906589419!2d139.69451411567212!3d35.671586880196685!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cb479620a33%3A0x34bcc78ce7f8bf3e!2z5Luj44CF5pyo5YWs5ZyS!5e0!3m2!1sja!2sjp!4v1607053443907!5m2!1sja!2sjp"
 width="600"
 height="450"
 frameborder="0"
 style="border:0;"
 allowfullscreen=""
 aria-hidden="false"
 tabindex="0">
</iframe>

この中の「!4f13.1」と数値があります。

この「13.1」という数値が拡大率になり、数値を大きくするとマップが広がります。

試しに30にしてみます。

かなり周辺地域が分かるようになりました。

それでは逆に数値を小さくしてみます。

13.1から5にするとこうなります。

かなり拡大されましたね。

この数値は1~180まで設定することが出来ます。

ちなみに180だとこうなります。

カンプ通りにしたい時は数値を微調整して合わせてみて下さい。

-Web制作, コーディング, マップ