如何让Next.js中@react-google-maps/api的地图铺满全屏？

问题出在你给GoogleMap组件设置了固定的mapContainerStyle宽高（300px×300px），这会直接覆盖父元素的尺寸控制，所以地图不会铺满全屏。按照以下步骤修改即可：

1. 调整GoogleMap的mapContainerStyle，让它继承父元素的尺寸：
   将mapContainerStyle={{width: "300px",height: "300px"}}改为mapContainerStyle={{width: "100%", height: "100%"}}，这样地图容器会占满父div的全部空间。

2. （可选但推荐）确保全局根元素没有默认边距
   有些浏览器会给html和body设置默认的margin或padding，导致地图无法完全贴合屏幕边缘。可以在全局样式文件（比如globals.css）中添加：

   html, body {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   

修改后的完整组件代码：

return (
  <div
    style={{
      display: "flex",
      flexDirection: "column",
      height: "100vh",
      width: "100%",
    }}
  >
    <GoogleMap
      options={mapOptions}
      zoom={mapOption.zoom}
      center={mapCenter}
      mapTypeId={google.maps.MapTypeId.ROADMAP}
      mapContainerStyle={{width: "100%", height: "100%"}}
      onLoad={() => console.log("Map Component Loaded...")}
    />
  </div>
)

如果不想显式设置mapContainerStyle，也可以直接移除这个属性，@react-google-maps/api的GoogleMap组件会默认让容器占满父元素的可用空间，但显式设置100%的宽高会更稳妥，避免因版本更新或其他样式冲突导致的问题。

内容的提问来源于stack exchange，提问作者sam