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

【问题标题】：Size of infoWindow in google maps api v3. What is the right solution?google maps api v3 中 infoWindow 的大小。什么是正确的解决方案？
【发布时间】：2012-08-24 19:00:30
【问题描述】：

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

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

【问题讨论】：

50 像素太小了。查看对此问题的回复：stackoverflow.com/questions/12102285/…

标签： google-maps-api-3

【解决方案1】：

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

这是一个链接。：

Google Maps API v3: InfoWindow not sizing correctly

【讨论】：

只是让您知道，这是更好的答案，应该这样对待。在 infowindow 对象中添加一个 div，即 var InfoWindow = new google.maps.InfoWindow({ content: "DIV HERE" });

【解决方案2】：

这对我有用：

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

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

【讨论】：

我设置了新的 google.maps.InfoWindow({ maxWidth: 150 });它也不起作用。它的大小完全相同。
它可以工作，但会改变内容的宽度。我需要更改 infoWindow。

【解决方案3】：

GoogleMaps-API 在InfoWindow 周围生成类“gm-style-iw”。所以你可以简单地通过 CSS 改变大小，而不需要额外的标记：

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


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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

你的答案应该包含对你的代码的解释和它如何解决问题的描述。
ifowindow的宽高可以通过maxWidth和maxHeight来设置
如果你想添加样式使用 iwContent{width:400px;}
使用编辑按钮改进您的答案，而不是写评论。这样你就有更多机会获得支持。

【解决方案6】：

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

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

【讨论】：

【解决方案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
}

【讨论】：