如何让我的地图变得流畅（缩小并随视口大小增长）？

Question

我正在创建一个谷歌地图网站/应用程序，显示“较低的48”（连续的美国）。在一个较大的屏幕上，它看起来像我想要的那样：

...但是当我缩小视口/观看区域时（通过在屏幕的NE角落中混合调整大小按钮（或任何它的名称）），地图不会重绘得更小，正如我想要的那样，但只是显示相同大小的地图，因此大部分是隐藏的：

Google地图区域以HTML格式定义：

<div id="map"></div>

我正在使用的CSS可能是相关的：

html, body {
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
}

#map {
   width: 100%;
   height: 100%;
}