google-maps-api-3 - google maps api v3 中 infoWindow 的大小。什么是正确的解决方案？

Question

我需要更改谷歌地图 infoWindow 的宽度和高度，我看到了这个主题Google Map .InfoWindow Set Height and Width。我发现它的解决方案不起作用。即使是标准infoWindow = new google.maps.InfoWindow({maxWidth: '50px'})也行不通。

那么什么是解决方案？如何更改 infoWindow 的宽度和高度？

Answer 1

我总是在信息窗口中使用一个 div，它最适合我。然后你只需通过 css 设置 div 的大小。

这是一个链接。：

Google Maps API v3：InfoWindow 大小不正确

Answer 2

这对我有用：

new google.maps.InfoWindow({ maxWidth: 320 });

删除 ' ' 和 px 说明符，我相信它也适合你。

Answer 3

GoogleMaps - API在gm-style-iw. InfoWindow所以你可以简单地通过CSS改变大小，而不需要额外的标记：

var infowindow = new google.maps.InfoWindow({
    content: contentString
});


.gm-style-iw {
    height: 100px;
    width: 300px;
}

Answer 4

我已经添加并且它正在工作

var infowindow = new google.maps.InfoWindow({
content:'<div style="width:200px; height:100px">Some text</div>'
});

Answer 5

infowindow = new google.maps.InfoWindow({
    content: "",
    maxWidth: 200 ,
    maxHeight: 400
});

Answer 6

我发现除非我用 强制样式，否则!important它不起作用。所以：

.gm-style-iw {
    height: 100px;
    width: 300px !important;
}

Answer 7

我知道这是一个老问题，但我想添加一个响应式解决方案。这将很好地适应小型设备。

@media (max-width: 413px) {
// Set gm container to screen width leaving 20px pad on each side
  .gm-style-iw {
    width: calc(100vw - 40px)!important;
    min-width: unset!important;
    max-width: unset!important;
  }

  // Next is the container Div that you create on your infoWindow function
  // on google example var contentString = '<div id="content">'+

  .your-main-container-class {
    width: calc(100vw - 80px);
    padding: 8px 0;
    margin: auto;
  }
}

然后对于更大的屏幕，只需按照谷歌的建议设置你的宽度

.your-main-container-class{
  width: 316px; // Your desire width
  padding: 8px 0 8px 8px; // Play with padding if you have a custom close button
}