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

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

目次

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

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

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

記事の公開当時（2015年12月11日）はソースの中の数字を変更しないといけなかったのですが、今では簡単に縮尺変更ができるようになっています。

現在は地図上で縮尺を任意のサイズに変更し「共有」>「地図を埋め込む」でコードを取得することができるようになっています。普段Googleマップで場所を調べる時と同じ操作でできるのがありがたいですね。

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

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3211.762363325799!2d139.05773131596206!3d36.39074639833878!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x601ef322bb2fcab5%3A0x619ada90a92a9548!2z576k6aas55yM5bqB!5e0!3m2!1sja!2sjp!4v1449575156776" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

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

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

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

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

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

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

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

<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3211.762363325799!2d139.05773131596206!3d36.39074639833878!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f38!3m3!1m2!1s0x601ef322bb2fcab5%3A0x619ada90a92a9548!2z576k6aas55yM5bqB!5e0!3m2!1sja!2sjp!4v1449575156776" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

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

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

.map{
    width:600px;
    margin:0 auto;
}
    .map iframe{
        height:400px;
    }
@media only screen and (max-width: 768px) {
    .map{
        width:95%;
    }
        .map iframe{
            height:250px;
        }
}

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

参考サイト

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