Google Maps API v3：InfoWindow 大小不正确答案

【问题标题】：Google Maps API v3: InfoWindow not sizing correctlyGoogle Maps API v3：InfoWindow 大小不正确
【发布时间】：2010-12-06 00:12:42
【问题描述】：

当您单击 Google Maps v3 上的主页图标时，我的 InfoWindow 似乎没有正确地自动调整为 InfoWindow 内容的大小。

它在不应该的时候提供滚动条。 InfoWindow 应该正确地自动调整大小。

有什么想法吗？

根据请求，为 InfoWindow 注入 HTML 的相关 JavaScript：

listing = '<div>Content goes here</div>';

更新

此错误已由 Google 在 issue 中处理

https://issuetracker.google.com/issues/35823659

该修复已于 2015 年 2 月在 Maps JavaScript API 3.19 版中实施。

【问题讨论】：

最好将相关代码复制到您的问题中。否则当你网站上的代码发生变化时，这个问题就变得毫无意义了。
嗯，这就是重点。据我了解，Google Maps v3 API 应该会自动调整大小，而不管我的 CSS 是什么……但事实并非如此。但无论如何我都会发布代码
我知道这已经过时了，但万一有人到了这里并尝试了所有方法但仍然存在问题（就像我所做的那样）：信息窗口的最大高度与您的地图尺寸成比例。这比 v2 小。因此，如果您从 v2 升级到 v3 并遇到此问题，可能是因为这个。要么缩短你的内容，要么延长你的地图，要么降级回 v2。

标签： javascript html css google-maps

【解决方案1】：

使用 domready 事件并在 domready 事件触发两次后重新打开信息窗口并显示隐藏的内容，以确保所有 dom 元素都已加载。

// map is created using google.maps.Map() 
// marker is created using google.maps.Marker()
// set the css for the content div .infowin-content { visibility: hidden; } 

infowindow = new google.maps.InfoWindow();    
infowindow.setContent("<div class='infowin-content'>Content goes here</div>");
infowindow.setPosition(marker.getPosition());
infowindow.set("isdomready", false);
infowindow.open(map);   

// On Dom Ready
google.maps.event.addListener(infowindow, 'domready', function () {
    if (infowindow.get("isdomready")) {
        // show the infowindow by setting css 
        jQuery('.infowin-content').css('visibility', 'visible');               
    }
    else {
        // trigger a domready event again.
        google.maps.event.trigger(infowindow, 'content_changed');
        infowindow.set("isdomready", true);
    }
}

我尝试只做一个 setTimeout(/* show infowin callback */, 100)，但有时如果内容（即：图像）加载时间过长，它仍然无法正常工作。

希望这对你有用。

【讨论】：

【解决方案2】：

在信息窗口中添加一个 div

<div id=\"mydiv\">YourContent</div>

然后使用 css 设置大小。为我工作。这假设所有信息窗口的大小都相同！

#mydiv{
width:500px;
height:100px;
}

【讨论】：

没错。大小相同，或者您在 css 中创建足够多不同维度的类。
根据您使用 infowindows 的方式，使用类而不是 ID 可能更安全，以避免在同一页面上出现重复的 ID，例如 <div class=\"mydiv\">YourContent</div> 和 @987654324 @
它适用于桌面，但不适用于移动设备 (Android)/

【解决方案3】：

简答：在构造函数中设置 maxWidth 选项属性。是的，即使设置最大宽度不是您想要做的。

更长的故事：将 v2 映射迁移到 v3，我看到了所描述的问题。 Windows 的宽度和高度各不相同，有些有垂直滚动条，有些没有。有些
嵌入在数据中，但至少有一个大小可以。

我不认为 InfoWindowsOptions.maxWidth 属性是相关的，因为我不关心 constrain 宽度...但是通过使用 InfoWindow 构造函数设置它，我得到了我想要的，并且窗口现在自动调整大小（垂直）并显示完整的内容，而没有垂直滚动条。对我来说没有多大意义，但它有效！

见：http://fortboise.org/maps/sailing-spots.html

【讨论】：

如果其他人试图将maxWidth 设置为百分比，谷歌地图会将浮点数识别为父元素的百分比，并将其转换为等效像素：声明{"maxWidth":0.25}，父元素是 1000px 宽，InfoWindow 将有一个width: 250px。我认为不可能强制 InfoWindow 的宽度保持百分比（maxWidth 的值必须是一个数字，所以{"maxWidth":"25%"} 将不起作用，{"maxWidth":25%} 被视为未定义的 25 模数并触发语法错误） .
有趣。当前的 Google 文档说 google.maps.InfoWindowOptions.maxWidth 属性是“一个数字”，我们推断出像素单位。解析器没有理由不能同时接受十进制数并将其解释为分数......并且将其作为未记录的“功能”留下。除了可能是好的。
好的，+1 工作得很好，但为什么我在研究 gMap 功能时总是在那个帆页上结束。
这可能在 2010 年有效，但在 2014 年没有帮助。
@Simon 新的一年，新的问题……这次有什么解决方案吗？

【解决方案4】：

这对我有用。在setContent 中添加div

sh_map.infoWindow.setContent([
  '<div id=\"mydiv\">',
  'Your content goes here',
].join(''));

然后将此 CSS 添加到您的页面：

<style type="text/css">
#map-canvas {
 text-align: center;
 vertical-align: middle;
}
#mydiv {
 font-family: "Comic Sans MS", cursive;
 font-size: 10px;
 border-top-width: 0px;
 border-right-width: 0px;
 border-bottom-width: 0px;
 border-left-width: 0px;
 border-top-style: none;
 border-right-style: none;
 border-bottom-style: none;
 border-left-style: none;
 letter-spacing: normal;
 text-align: center;
 vertical-align: middle;
 word-spacing: normal;
}
</style>

例如，见http://www.student-homes-northampton.co.uk；单击房屋图片下方的链接以显示 Google 地图。

【讨论】：

谢谢，直到我将字体设置为comic-sans 才开始起作用。

【解决方案5】：

我知道这是一个旧线程，但我刚刚遇到了同样的问题。我在 InfoWindow 中有 <h2> 和 <p> 元素，它们都有底部边距。我删除了边距，并且 InfoWindow 的大小正确。其他建议的修复均无效。我怀疑 InfoWindow 大小的计算没有考虑边距。

【讨论】：

我遇到了这个问题，其他修复都不起作用，但这个解决了。谢谢:)
这适用于窗口内使用的所有边距。
我仍然有问题，但只是将所有内容都包裹在 <div style='overflow:hidden;'></div> 中，现在看起来不错。

【解决方案6】：

地图容器的高度也很重要。如果小 infoWindow 总是在 80px 高度。否则 maxWidth 和 #innerDiv 修复就像一个魅力。

【讨论】：

没错，我不认为是任何固定大小，但关键是如果地图不够大（在这种情况下是高度），那么信息窗口将不会调整大小来包装我们的内容。尝试放大地图并再次检查
这是这里最正确的答案。地图太小通常是导致信息窗口大小问题的原因。如果您想测试理论，只需检查地图容器并增加宽度和高度。
不幸的是，即使地图足够大，仍然存在问题。

【解决方案7】：

您应该将内容从 jQuery 对象提供给 InfoWindow。

var $infoWindowContent = $("<div class='infowin-content'>Content goes here</div>");
var infoWindow = new google.maps.InfoWindow();
infowindow.setContent($infoWindowContent[0]);

【讨论】：

好的，这工作得很好，非常感谢......现在我想知道为什么:)
这是我见过的最奇怪的修复之一。除了这个之外，这个问题的其他黑客都没有对我有用。难以置信。
由于某种原因，当您传入 DOM 节点而不是字符串时，地图 API 似乎不会将 overflow: auto 放在 InfoWindow DIV 上。如果内容仅超出 1-2px，这可以解决问题。不幸的是，这意味着更长的内容实际上挂出 InfoWindow，而不是添加滚动条。
虽然这确实有效，但要求人们在页面上简单地包含 jQuery 以使 infoWindow's 显示正确是非常讨厌的。我的答案中列出了为什么这个工作的完整答案 - jQuery 创建一个分离的 DOM 树，它强制正确呈现内容，并且在谷歌尝试将 infoWindow 放置在地图上之前准确确定它的大小

【解决方案8】：

我遇到了同样的问题，当我的 <h2> 元素换到第二行时尤其明显。

我在 infoWindow 中为 <div> 应用了一个类，并将字体更改为通用系统字体（在我的例子中是 Helvetica），而不是它一直使用的 @font-face 网络字体。问题已解决。

【讨论】：

不幸的是，这不是一个可靠的解决方案。已知 Arial 和其他标准字体也会出现此问题。

【解决方案9】：

//infowindow.setContent(response);    
var infowindowopts = { 
    maxWidth: 274, 
    content: response
};
infowindow.setOptions(infowindowopts);

【讨论】：

【解决方案10】：

我的答案是添加一个监听器（使用 addListenerOnce）来检查 infoWindow 是否已添加到 DOM，然后再次打开 infoWindow（无需关闭它）。

// map, marker and infoWindow code, we'll call them 
// myMap, myMarker and myInfoWindow

myInfoWindow.open(myMap, myMarker);
google.maps.event.addListenerOnce(myInfoWindow, 'domready', function(){
                myInfoWindow.open(myMap, myMarker);
            });

【讨论】：

【解决方案11】：

将min-height 添加到您的 infoWindow 类元素。

如果您的 infoWindows 大小相同，这将解决问题。

如果没有，请将这行 jQuery 添加到 infoWindow 的单击函数中：

//remove overflow scrollbars
$('#myDiv').parent().css('overflow','');

【讨论】：

你在正确的轨道上。 infoWindow 的最小高度对您没有帮助，因为该 DIV 包含在溢出的 DIV 中。所以设置一个最小高度会让它每次都滚动。
查看DOM的结构，实际上是infoWindow类的GRANDPARENT需要移除溢出。我的代码看起来像： infoCallBack = function infoCallback(infowindow, marker) { return function () { /* 显示窗口的代码放在这里，然后我的溢出修复下一步 */ setTimeout(function() { $('.infowindow') .parent().parent().css('溢出',''); },25);这基本上会在 25 毫秒后触发 infoWindow 的修复，足够它渲染的时间。

【解决方案12】：

我在使用 IE 时遇到了同样的问题，并尝试了这些响应中详述的许多修复，但无法可靠地删除 IE 中的垂直滚动条。

最适合我的是在信息窗口中切换到固定字体大小——“px”...我使用的是 ems。通过修复字体大小，我不再需要明确声明信息窗口的宽度或高度，滚动条也永远消失了。

【讨论】：

它有时会有所帮助，但不能可靠地解决问题。如果您在 Windows 上的 Chrome 38 中查看这个小提琴，它仍然有一个丑陋的滚动条：jsfiddle.net/simoneast/dckxp62o/3

【解决方案13】：

我无法让它以任何形状或形式工作，我在盒子里放了 3 个 div。我将它们包裹在一个外部 div 中，宽度和高度都设置正确，但没有任何效果。

最后我通过将 div 设置为绝对左上角来修复它，然后在 div 之前，我设置了两个图像，一个 300px 宽和 1px 高，一个 120px 高和 1px 宽，透明 gif。

然后它正确缩放！

它很丑，但它有效。

你也可以做一个图像并设置一个我期望的 zindex，或者如果你的窗口没有交互，甚至只是一个图像，但它包含一个表单，所以，这不是一个选项......

【讨论】：

【解决方案14】：

我认为这种行为是因为外部容器中的一些 css 样式，我遇到了同样的问题，但我使用内部 div 解决了它并添加了一些填充，我知道这很奇怪，但它解决了问题

<div id="fix_height">
    <h2>Title</h2>
    <p>Something</p>
</div>

在我的 style.css 中

div#fix_height{
    padding: 5px;
}

【讨论】：

【解决方案15】：

我已经尝试了所有这些解决方案，但都没有奏效。经过反复试验，我想通了。

<style type="text/css">
#map_canvas {
    line-height:normal;
}
</style>

为地图画布 div 设置 line-height:normal。

【讨论】：

是的！线高也是为我解决的问题。没有其他工作。具体来说，我在样式表中将行高设置为 { line-height: 1.3; }。我将其更改为 { line-height: 1.3em } 并解决了问题。
或者您也可以将地图容器 div 的行高设置为正常，如上所示。
Google Maps v3 中没有 #map_canvas 我可以看到。这必须来自旧 v2。
@Simon #map_canvas 是您用于地图的 div。它可以是您想要的任何名称。
不幸的是它没有帮助。这个小提琴仍然在 Chrome 中显示滚动条：jsfiddle.net/simoneast/dckxp62o

【解决方案16】：

我在div 内直接有一个内联元素（一个a 标签），style="overflow:auto"[... 将它包裹在p 标签中并修复了它。

看起来任何没有直接嵌套在信息窗口内的块元素中的内联元素都会导致这种情况。

【讨论】：

【解决方案17】：

如果没有其他问题，请在打开窗口后尝试添加内容。这应该会强制它调整大小。

infoWindow = new google.maps.InfoWindow()
infoWindow.open(map, marker)
infoWindow.setContent(content)

【讨论】：

【解决方案18】：

将我的答案添加到列表中，因为这些都没有解决我的问题。我最终将我的内容包装在一个div中，给那个div一个类，并在div上指定min-width，并在infoWindow上指定maxWidth，并且它们都需要相同的大小，否则宽度否则高度会在内容数量错误的盒子上溢出。

Javascript：

// Set up the content for the info box
var content = "<div class='infowindow-content'>" + content + "</div>";

// create a map info box
var infoWindow = new google.maps.InfoWindow({
    maxWidth: 350,
    content: content
});

CSS：

div.infowindow-content {
    min-width: 350px;
}

【讨论】：

在内容上设置min-width 也是唯一对我有用的方法。不过，不必在 infoWindow 上设置 maxWidth。
@MarkParnell = 确保彻底测试。当给定宽度的文本超过一定数量时，我遇到了问题！如果您知道内容将是什么，那就没什么大不了了 :)
非常感谢......这也帮助了我。在移动视图中，我给了 maxWidth: 350。它仍然采用了一些随机值。在 min-width 的帮助下，它可以正常工作。

【解决方案19】：

看来问题出在 Roboto 网络字体上。

信息窗口根据提供的内容使用内联宽度和高度属性呈现。但是，它不是用已经渲染/加载的 webfont 计算的。在将整个地图打印到屏幕后渲染字体后，由于窗口 DIV 内嵌的“overflow:auto”属性，它会导致滚动条出现。

我发现可行的解决方案是将内容包装在 DIV 中，然后应用 CSS 覆盖 webfont：

.gmap_infowin {
    font-family: sans-serif !important;
    font-weight: normal !important;
}

<div class="gmap_infowin">Your info window content here.</div>

【讨论】：

这个解决方案对我有用。隐藏滚动也有效： .gm-style-iw{ overflow: hidden !important;} 但这会隐藏 infoWindow 中的部分内容
+1 是的！但我将此答案与user2656824's 结合在一起。
+1 因为这是唯一一个似乎最终承认这是由于 Roboto 字体问题的答案。如果其他字体也呈现错误，我不会感到惊讶。问题是 .gm-style-iw 计算的高度比必要的小一点，可能是因为浮点舍入。真正唯一合理的选择是不幸的 .gm-style-iw{overflow: hidden !important;}。当然，一旦你真的需要滚动，这将变得毫无用处
Roboto 字体确实似乎有时会触发此问题，但 Arial 和默认字体也会发生这种情况。如果您在 Windows 上的 Chrome 38 中使用建议的修复来查看这个小提琴，它仍然有一个讨厌的滚动条：jsfiddle.net/simoneast/dckxp62o/2

【解决方案20】：

添加到 CSS

.gm-style-iw{
    overflow: hidden !important;
}

信息窗口文本：

<div style="width: 200px; height:150px;">
  here text of the info window
</div>

【讨论】：

这将隐藏任何对于信息窗口来说太大的信息。

【解决方案21】：

我尝试了列出的每个答案。没有一个对我有用。这最终永久修复了它。我继承的代码在所有 <h#> 和 <p> 条目周围都有一个 DIV 包装器。我只是在同一个 DIV 中强制了一些“样式”，考虑到所需的最大宽度，为了以防万一（别人的修复）和我自己的 white-space: nowrap，加入了行高变化，然后使自动溢出正确调整。没有滚动条，没有截断，没有问题！

html = '<div class="map-overlay" style="max-width: 400px;
                                        line-height: normal;
                                        white-space: nowrap;
                                        overflow: auto;
                                       ">';

【讨论】：

这个！在我到达这里之前，我一直在通过所有答案都没有成功。就我而言，是 white-space: nowrap 具有魔力 - 其他样式是不必要的。干杯！
这似乎确实有效，但是，一些信息窗口必须多次单击...我的最终解决方案是通过添加 @987654328 将此答案与 Concept211 结合起来@ 到 CSS。
不幸的是，如果您有任何长线，这些线将被切断而不是换行。除非你知道你所有的台词都很短，否则这不是一个理想的解决方案。

【解决方案22】：

将以下内容添加到我的 CSS 中对我有用：

white-space: nowrap;

【讨论】：

这将删除长行的包装。我不认为这对很多人来说是一个合适的解决方案。

【解决方案23】：

.gm-style-iw{
    height: 100% !important;
    overflow: hidden !important;
}

对我有用

【讨论】：

这不是一个很好的解决方案，因为任何大于信息窗口的内容都将被截断并隐藏。
不适合不同长度的内容，但我的内容对于每个应用宽度 !important 和高度 !important 的指针来说几乎是相同的，这对我来说已经足够了！

【解决方案24】：

我发现 infoWindow 内容内的任何元素中的任何 line-height 设置都会导致此问题。删除行高设置为我解决了这个问题。

【讨论】：

不幸的是，默认行高有时仍会出现此问题。

【解决方案25】：

只是总结一下在所有浏览器中对我有用的所有解决方案：

不要在信息窗口内使用边距，只使用填充。
设置信息窗口的最大宽度：

this.infowindow = new google.maps.InfoWindow({ maxWidth: 200 });
用
包装信息窗口的内容
<div style="overflow:hidden;line-height:1.35;min-width:200px;">*CONTENT*</div>

（更改您在信息窗口 maxWidth 上设置的值的最小宽度）

我已经对其进行了测试，它适用于所有浏览器，并且我有超过 400 个标记...

【讨论】：

这为信息窗口设置了一个固定宽度（不再是流动的），这是一种解决方案，但并不理想。

【解决方案26】：

我知道很多其他人已经找到了适用于他们的特定案例的解决方案，但由于没有一个适用于我的特殊案例，我认为这可能对其他人有所帮助。

一些细节：

我在一个项目中使用 google maps API v3，其中内联 CSS 是我们非常非常想避免的。我的 infowindows 适用于除 IE11 之外的所有内容，IE11 的宽度计算不正确。这会导致 div 溢出，从而触发滚动条。

我必须做三件事：

从 infowindow 内容中的任何内容中删除所有 display: inline-block 样式规则（我用 display: block 替换） - 我想从一个线程中尝试这个（我找不到了）有人在 IE6 上遇到同样的问题。
将内容作为 DOM 节点而不是字符串传递。我正在使用 jQuery，所以我可以通过将 infowindow.setContent(infoWindowDiv.html()); 替换为 infowindow.setContent($(infoWindowDiv.html())[0]); 来做到这一点事实证明这对我来说是最简单的，但还有很多其他方法可以获得相同的结果。
使用“setMaxWidth”技巧 - 在构造函数中设置 MaxWidth 选项 - 稍后设置该选项不起作用。如果您真的不想要最大宽度，只需将其设置为一个非常大的数字即可。

我不知道这些为什么会起作用，我也不确定其中的一部分是否会起作用。我知道它们都不能单独适用于我的所有用例，而且 2 + 3 也不起作用。我没有时间测试 1 + 2 或 1 + 3。

【讨论】：

【解决方案27】：

我无法接受对信息窗口的宽度和高度进行硬编码，或者设置white-space: nowrap，maxWidth 解决方案对我没有帮助，其他一切要么不起作用，要么不起作用不适合我的用例。

我的解决方案是设置内容，打开窗口，然后在触发domready 事件时，将内容上的height CSS 属性设置为任何高度，然后强制谷歌地图调整信息窗口的大小相应地。

infoWindow 是 InfoWindow 对象，$infoWindowContents 是我要放入其中的内容的 Jquery 对象，map 是我的 Map 对象。 marker 是一个被点击的标记。

infoWindow.setContent($infoWindowContents.get(0));

var listener = google.maps.event.addListener(infoWindow, 'domready', function() {
  // Stop listening, otherwise the listeners stack up if the window is opened again
  google.maps.event.removeListener(listener);

  // Set the height on the container to however tall the browser is currently rendering it
  $infoWindowContents.height($infoWindowContents.height());

  // Force Google Maps to recalculate the InfoWindow height
  infoWindow.setContent($infoWindowContents.get(0));
});

infoWindow.open(map, marker);

（我在类似的问题上发布了相同的解决方案How do I get a google-maps InfoWindow to resize to fit the content that is placed inside of it?）

【讨论】：

【解决方案28】：

在浪费时间阅读了一段时间之后，我只是想要一些简单的东西，这个 css 符合我的要求。

.gm-style-iw > div { overflow: hidden !important; }

这也不是一个即时解决方案，但在问题上加注星标/评论可能会让他们修复它，因为他们认为它已修复： http://code.google.com/p/gmaps-api-issues/issues/detail?id=5713

【讨论】：

这在某些情况下会切断内容。 :-( 在 Windows 上 Chrome 38 的这个小提琴中，“dddd”被完全切断：jsfiddle.net/simoneast/dckxp62o/4

【解决方案29】：

我从上面单独尝试了大多数（如果不是全部）答案，但在我的情况下没有一个有效。
所以我结合了其中的几个，试图找出我需要的最低限度。

这个组合对我有用：

div.infowindow {
    font-family: Courier;
    white-space: nowrap;
    overflow: hidden; 
}

您的里程可能会有所不同。祝你好运。

【讨论】：

不幸的是，您的答案并没有真正提供任何其他答案，也不是一个非常可靠的解决方案。它将导致内容被截断而不是换行和滚动。

【解决方案30】：

这完全解决了我的问题：

.gm-style-iw {
    overflow: visible !important;
    height: auto !important;
    width: auto !important;
}

【讨论】：

这是最适合我的答案。我没有添加自动高度，而是添加了最小高度。