サイトに埋め込んだGoogleマップの縮尺を変更&CSSでレスポンシブ対応する方法

Googleマップからコードを取得してサイトに埋め込もうとしたのですが、以前とコードの内容が変わっていてどこを変更すれば縮尺が変わるのか皆目見当がつかず…。
以前は&z=17など、「&z」を頼りに縮尺を変更していたのですが、Googleマップ上で縮尺変更してからコードを取得しても反映されず困っていました。しかし!偉大な先人がいらっしゃって無事解決できました。
縮尺変更だけではなんなので、レスポンシブ対応の方法も一緒にメモします。

目次

  • グーグルマップの縮尺を変更したい
  • グーグルマップをレスポンシブ対応にしたい

グーグルマップの縮尺を変更したい

今回は群馬県庁を例にして進めたいと思います。

まずは普通にGoogleマップで群馬県庁を検索し、左側に表示される「共有」をクリックして埋め込み用のコードを取得します。
今回取得したコードはこんな感じです。

このコードの中の!4f13.113.1の部分が縮尺率になるようです。
参考にさせていただいた記事によると

1~180の間で変更可能のようです。数字が小さいほど倍率が高く、数字が大きいほど倍率が低くなります。

とのことですので、任意の数字に書き換えます。
数字が小さいほど狭域に、数字が大きいほど広域になります。180にすると世界地図になります!

今回は「!4f38」としました。この縮尺は最寄りの駅やインター、大きな道路など目印になるものが入るような基準で決めています。

グーグルマップをレスポンシブ対応にしたい

縮尺を書き換えたコードをサイトの表示させたい場所に貼り付けます。
貼り付けたコードをdivで囲んで任意のクラスをつけます。
今回は「map」というクラス名をつけました。

コードの最後の方に書いてあるwidth="600" height="450"width="100%" height="100%"と書き換え、divの幅と高さをCSSで指定することでレスポンシブ対応します。

CSSはこんな感じです。
htmlを高さ・幅ともに100%と書き換えたので、囲ったdivでサイズ指定します。

記事中に表示されているGoogleマップもレスポンシブになっているのでPCとスマホで見比べてみてください!

参考サイト

GoogleMapを任意の倍率で埋め込む

  • Advertising
  •  

関連記事

コメント