【解説】GoogleMap埋め込みの拡大率・縮尺を調整する【HTML】

2023年11月8日

記事内に広告を含みます

パソ君

・GoogleMap埋め込みの拡大率って調整できる？

こんな疑問にお答えします。

コーディングをするとき、GoogleMapを埋め込むときありますよね。

HPの会社の場所を示すためなどに。

その埋め込んだGoogleMapの拡大率を変えたい要望がたまにあります。

実はそれ簡単に実装可能です。

ジト

すぐにできるよ！

ということで、この記事では「GoogleMap埋め込みの拡大率・縮尺を調整」について解説していきます！

この記事でわかること

GoogleMap埋め込みの拡大率・縮尺を調整

【解説】GoogleMapを埋め込み【HTML】
【解説】GoogleMap埋め込みの拡大率・縮尺を調整する【HTML】
【解説】GoogleMap埋め込みの拡大率・縮尺を調整する【HTML】：まとめ

【解説】GoogleMapを埋め込み【HTML】

まず初めにGoogleMapを埋め込む方法からみていきましょう。

下記になります。

GoogleMapを開く

https://www.google.com/maps/

埋め込みたい場所を検索⇒共有をクリック

例として「渋谷区スポーツセンター」を検索しました。

共有ボタンをクリックしましょう。

「地図を埋め込む」⇒「HTMLをコピー」

すると下記画面がでてきます。

上のタブで「地図を埋め込む」を選択しましょう。

そして「HTMLをコピー」をクリックすれば、埋め込み用コードがゲットできます。

コードを貼り付ける

あとはコードを貼り付けるのみです。

実際に張り付けたサンプルが下記になります↓

【解説】GoogleMap埋め込みの拡大率・縮尺を調整する【HTML】

では先ほど埋め込んだGoogleMapを、拡大・縮小していくやり方を紹介していきます。

やり方は簡単で「埋め込み用コードの数値を書き換える」のみです。

埋め込み用コードを見てみると・・

埋め込みコードを詳しく見ると下記になります。

<iframe 
    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.0551777267515!2d139.67868747637405!3d35.67564333027993!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018f33082967ccf%3A0x60aac68b939177c4!2z5riL6LC35Yy644K544Od44O844OE44K744Oz44K_44O8!5e0!3m2!1sja!2sjp!4v1699421872905!5m2!1sja!2sjp" 
    width="600" 
    height="450" 
    style="border:0;" 
    allowfullscreen="" 
    loading="lazy" 
    referrerpolicy="no-referrer-when-downgrade">
</iframe>

この2行目コードの「4f13.1」の「13.1」の数値を変えることで、拡大・縮尺することができます。

「Ctrl」＋「F」で検索するとすぐ見つかりますよ↓