Question

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

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

Answer 1

我总是在infowindow中使用div，它最适合我。然后你只需通过css设置div的大小。

这是一个链接。：

Google Maps API v3: InfoWindow not sizing correctly

Answer 2

这对我有用：

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

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

Answer 3

GoogleMaps-API 会生成课程＆＃34; gm-style-iw＆＃34;围绕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;
  }
}

然后在更大的屏幕上，按照Google的建议设置宽度

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

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

7 个答案: