Google Map 高さもレスポンシブ対応にしたい

Google Maps JavaScript API v3の使い方まとめ (サンプルコード付き)
https://syncer.jp/google-maps-javascript-api-matome#sec-12-1


HTML
地図キャンパスを囲む形の要素を追加して下さい。クラス属性値の名称は何でも大丈夫です。
HTML
<div class="map-canvas-wrapper">
<div id="map-canvas"></div>
</div>
CSS
下記が肝心の、そのスタイルシートの内容です。調整する点は一点のみで、.map-canvas-wrapperにあるpadding-bottomの値(サンプルでは75%)です。このパーセンテージは、親要素の横幅100%に対する縦幅の割合です。ここでいう「親要素」とは、map-canvas-wrapperの親要素のことです。つまり、地図のキャンパス(#map-canvas)から見れば、おじいちゃんの要素です。例えば、サンプルの場合だと、親要素の横幅が1,000pxある時、縦幅は750pxになります。そして、400pxの時は300px、といったように地図の縦幅が横幅に応じて調整されていきます。この75%を、好みに応じて調整して下さいね。
CSS
.map-canvas-wrapper
{
max-width: 100% ;
padding-bottom: 75% ;
position: relative ;
top: 0 ;
left: 0 ;
height: 0 ;
overflow: hidden ;
}

.map-canvas-wrapper > div
{
position: absolute ;
top: 0 ;
left: 0 ;
width: 100% ;
height: 100%
}
これは、取り囲む要素の余白部分(padding-bottom)のスペースいっぱいに、その子要素である地図キャンパスを表示させるというテクニックで、アスペクト比を保ったレスポンシブ・コンテンツにする場合に、利用できます。時間や興味があったら、下記記事を読んでみて下さいね。
https://syncer.jp/google-maps-javascript-api-matome