Html 如何使我的地图保持流动（随视口大小收缩和增长）？

我正在创建一个谷歌地图网站/应用程序，显示“下48”（毗邻美国）。在更大的屏幕上，它看起来就像我想要的：

…但当我缩小视口/查看区域时（通过在屏幕的东北角混合调整大小按钮（或其名称），地图不会像我希望的那样重新绘制得更小，而是以相同的大小显示地图，因此大部分是隐藏的：

google地图区域是以HTML的方式定义的：

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

---

这就是你要找的吗？不，我要找的是一个流畅的布局（我甚至不确定这是不是一个好主意，因为在手机上，地图太小了，你需要一个放大镜才能看到细节），地图会占据整个布局（调整大小）。看，无论屏幕/视口有多大或多小，你都可以看到整个美国（下48）地图——不多也不少。不过，我甚至不确定这是不是一个好主意；最好的可能是它已经运行的方式。

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

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