Web制作 HTML

Googleマップの拡大率(縮尺)を微調整する方法

Googleマップの拡大率(縮尺)を細かく微調整する方法ない?

デザインカンプからのコーディングの際、アクセス方法などのページでGoogleマップがある事が多いですが、マップの拡大率がデフォルトのままだとデザイン通りにはならない場合があります。

そこで今回はGoogleマップの拡大率(縮尺)を細かく微調整する方法をご紹介します。

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


Googleマップを埋め込む方法

最初にGoogleマップを埋め込む方法から解説しますが、まずGoogleマップを開いて地名か住所を検索します。

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

Googleマップ:埋め込み(地名検索と共有ボタン)

Googleマップ:埋め込み

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

Googleマップ:地図を埋め込む用のHTMLコードをコピー

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』と数値があります。

Googleマップ埋め込み用コード

Googleマップ埋め込み用コード

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

試しに『30』にしてみます。

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

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

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

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

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

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

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

以上になります。

あわせて読む
GoogleマップをAPIキー不要でモノクロ(白黒)表示にする方法【サンプルで解説】
GoogleマップをAPIキー不要でモノクロ(白黒)表示にする方法【サンプルで解説】

続きを見る

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-Web制作, HTML
-