使用@angular/google-maps 将自定义样式添加到角度地图答案

【问题标题】：Adding custom styles to angular map using @angular/google-maps使用@angular/google-maps 将自定义样式添加到角度地图
【发布时间】：2021-04-23 06:35:43
【问题描述】：

我正在使用 Angular 11 和 @angular/google-maps，我希望创建一个与其父级宽度相同的地图，但我只能设法获得一个方形地图（如图所示）

我正在使用我的 API 密钥在 index.html 中调用 google-maps api 脚本

<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY"
  type="text/javascript"></script>

并在我的overview.component.ts中生成地图

    <div id='map'>
      <google-map [center]='center'></google-map>
    </div>

在overview.component.scss中给它以下样式

.main-container {
  width: 100%;
  height: 100%;
}

#map {
  padding: 1% 1% 1% 1%;
  width: 100% !important;
  height: 400px !important;
}

我也尝试过给google-map标签本身，但没有任何运气

【问题讨论】：

标签： angular google-maps google-maps-api-3

【解决方案1】：

您需要在 google-map 标签中设置宽度。

<google-map width="100%"></google-map>

您可以在文档here中找到更多信息

这是一个stackblitz示例here

【讨论】：