Googleマップの縦横比を保つ

通常だとウィンドウ幅を変えるとGoogleマップの縦横比が変わってしまいます。
それが気に入らない人は以下のコードを試してみてください。

やっていることは、

• ・埋め込みタグをdivタグで囲む
• ・divタグはpadding-topを%指定をして高さを調節する
• ・埋め込みタグはpositionで位置を調節する

です。

これはpaddingの特性を利用しています。
paddingの特性として%指定をすると親要素の幅に対する割合で値が決まります。

HTML
コピー
<div class="google_map">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.74779853328!2d139.74324421519992!3d35.65858483882126!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1626913978443!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>

CSS
コピー
.google_map{
    padding-top: 40%;
    width: 100%;
    position: relative;
}
.google_map iframe{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

表示サンプル

Googleマップの縮尺を変える

もっと周辺情報かわかるようにしたかったり、もっと街全体の様子がわかるようにしたいなどGoogleマップの縮尺を変える方法を解説します。

iframeのsrcの一部を変えるだけで縮尺を変えることができます。
srcの中の!4f13.1という部分を見つけてください。
!4f13.1の中の13.1の部分の数字を変更すると縮尺を変えることができます。

数字を小さくすると近づき、大きくすると遠ざかります。

表示サンプル
値を1.0に設定した場合

Googleマップにフィルターをかける

GoogleマップのグレーにしたいなどのカスタマイズはCSSのfilterを指定することで簡単にGoogleマップの雰囲気を変えることができます。

※CSSのfilterはIEでは動作しません。

CSS
コピー
iframe{
    filter: grayscale(100%);
}

表示サンプル