小开

使用 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 inowin callback */，100) ，但是有时如果内容(即: 图像)加载时间太长，那么这个方法仍然无法工作。

希望这对你有用。

小开

在 inowwindow 中添加一个 div

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

然后设置大小使用 css.works 为我工作。这假设所有的 inowindows 是相同的大小！

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

小开

简短的回答: 在构造函数中设置 maxWidth options 属性。是的，即使设置的最大宽度不是你想要做的。

更长的故事: 将 v2映射迁移到 v3，我看到了所描述的问题。窗口的宽度和高度各不相同，有些窗口有垂直滚动条，有些窗口没有。有些在数据中嵌入了 < br/> ，但是至少有一个大小为 OK。

我不认为 InfoWindowsOptions.maxWidth 属性是相关的，因为我不关心约束的宽度... 但通过设置它与 InfoWindow 构造函数，我得到了我想要的，窗口现在自动调整大小(垂直) ，并显示没有垂直滚动条的完整内容。对我来说没什么意义，但是很管用！

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

小开

这对我有用。把 div放到 setContent里

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 地图。

小开

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

小开

地图容器的高度也很重要。如果对小信息窗口总是将在80px 的高度。否则，maxWidth和 #innerDiv修复工程像一个魅力。

小开

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

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

小开

我也遇到了同样的问题，尤其是当我的 <h2>元素包装到第二行时。

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

小开

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

小开

我的答案是添加一个侦听器(使用 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);
});

小开

向 infoWindow 类元素添加 min-height。

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

如果没有，将这一行 jQuery 添加到 infoWindow 的 click 函数中:

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

小开

我在 IE 上也遇到了同样的问题，并且尝试了许多在这些响应中详细说明的修复方法，但是无法可靠地移除 IE 中的垂直滚动条。

对我来说，最有效的方法是在 inowwindow 中切换到固定的字体大小——‘ px’... 我使用 ems。通过修改字体大小，我不再需要显式地声明 inowwindow 的宽度或高度，滚动条也就永远消失了。

小开

我不能让它工作在任何形状或形式，我包括3迪夫进入框。我把它们包在一个外盘里，宽度和高度都设置得很正确，但是什么都不管用。

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

那么它的比例是正确的！

虽然很丑，但很有效。

你也可以做一个图片，设置一个 zindex，或者如果你的窗口没有交互的话，只设置一个图片，但是这里包含了一个表单，所以，这不是一个选项..。

小开

我认为这种行为是因为一些 CSS 样式在一个外部容器，我有同样的问题，但我解决了它使用一个内部的 div 和添加一些填充到它，我知道这是奇怪的，但它解决了问题

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

还有我的风格 CSS

div#fix_height{
padding: 5px;
}

小开

我尝试了所有这些解决方案，但没有一个奏效。经过一番反复试验，我终于明白了。

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

为 map 画布 div 设置 line-height: Normal。

小开

我有一个直接在 div内部的内联元素(一个标记) ，style="overflow:auto"[...将其包装在 p标记中，并对其进行了修复。

似乎任何没有嵌套在 inowwindow 内部的块元素中的内联元素都会导致这种情况。

小开

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

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

小开

我要把我的答案添加到列表中，因为这些都没有解决我的问题。我最终将我的内容包装在一个 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;
}

小开

看来问题出在 Roboto webfont 上。

将根据提供的内容呈现 inline width 和 height 属性。但是，它不是使用已经呈现/加载的 webfont 计算的。在整个地图打印到屏幕上之后，一旦字体呈现出来，就会导致滚动条出现，因为“ overflow: auto”属性内嵌在窗口的 DIV 中。

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

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


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

小开

加入 CSS

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

信息窗口文本:

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

小开

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

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

小开

将下面的代码添加到我的 CSS 中，使我获得了成功:

white-space: nowrap;

小开

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

对我有用

小开

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

小开

总结一下我在所有浏览器中使用的所有解决方案:

不要在 inowwindow 中使用页边距，只使用填充。
为 inowwindow 设置最大宽度:

InfoWindow = new google.map. InfoWindow ({ 最大宽度: 200 });
将 inowwindow 的内容包装为

<div style="overflow:hidden;line-height:1.35;min-width:200px;">*CONTENT*</div>

(更改在 inowindowmaxWidth 上设置的值的最小宽度)

我测试过了，每个浏览器都能用我有超过400个标记。

小开

我知道很多其他人已经找到了解决方案，为他们的特殊情况下，但由于他们没有工作的天啊特定情况下，我认为这可能是有帮助的其他人。

一些细节:

我使用谷歌地图 API v3的一个项目，其中内联 CSS 是我们真的，真的想要避免的东西。除了 IE11的宽度计算不正确之外，我的 inowindows 都正常工作。这会导致 div 溢出，从而触发滚动条。

我必须做三件事:

删除所有显示: inline-block 风格的规则从任何内部的 inowwindow 内容(我替换为 display: block)-我的想法是尝试从一个线程(我不能找到更多) ，其中有人有同样的问题与 IE6。
将内容作为 DOM 节点而不是字符串传递。我使用的是 jQuery，所以我可以用 infowindow.setContent($(infoWindowDiv.html())[0]);替换: infowindow.setContent(infoWindowDiv.html()); 这对我来说是最简单的，但是还有很多其他的方法可以得到同样的结果
使用“ setMaxWidth”-设置 MaxWidth 选项 在构造函数中-设置后面的选项不起作用。如果你真的不想要一个最大宽度，只是设置为一个非常大的数字。

我不知道为什么这些工作，我不知道如果他们的子集将工作。我知道它们中没有一个能够单独地适用于我所有的用例，而且2 + 3也不能工作。我没时间测试1 + 2或1 + 3。

小开

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

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

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);

(我在一个类似的问题我如何得到一个谷歌地图信息窗口调整大小，以适应放在里面的内容？上贴出了相同的解决方案)

小开

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

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

这也不是一个立竿见影的解决方案，但主演/评论这个问题可能会让他们修复它，因为他们认为问题已经解决了: Http://code.google.com/p/gmaps-api-issues/issues/detail?id=5713

小开

我从上面尝试了大多数(如果不是全部的话)答案，但没有一个在我的情况下有效。
所以我把它们结合起来，试图找出我需要的最小值。

这个组合对我很有效:

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

你的成绩可能会有所不同，祝你好运。

小开

这完全解决了我的问题:

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

小开

好吧，这是一个为我做的把戏:

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

只有设置 overflow: visible的 .gm-style-iw实际上使问题更糟！我注意到在 Chrome 开发工具检查器中，在 .gm-style-iw元素中有两个 div，它们都默认设置为 overflow: auto。

我在 InfoWindows 中显示了相当多的 HTML 格式的文本，这可能就是为什么其他解决方案根本不适合我的原因。

小开

有趣的是，下面的代码将会修正 WIDTH 滚动条:

.gm-style-iw
{
overflow: hidden !important;
line-height: 1.35;


}

它用这个来修正高度滚动条:

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

编辑: 在任何一种样式中添加空白: nowrap; 都可以纠正在移除滚动条时似乎仍然存在的间距问题。说得好，内森。

小开

编辑(脱颖而出) : 相信我，在这个问题的其他一百个答案，这是唯一正确的一个，也解释为什么它的发生

好的，我知道这个帖子很老了，有一千个答案，但是 没有一个是正确的和我觉得有必要发布正确的答案。

首先，为了让 infoWindow 在没有滚动条的情况下显示，不要需要在任何事情上指定 width's或 height's，尽管有时候这样做可能会意外地让它工作(但它最终会失败)。

其次，谷歌地图 API infoWindow's 不要有一个滚动错误，它只是很难找到正确的信息，他们是如何工作的。就是这个:

当你告诉 Google Maps API 像这样在 infoWindow 中打开:

var infoWindow = new google.maps.InfoWindow({...});
....
infoWindow.setContent('<h1>Hello!</h1><p>And welcome to my infoWindow!</p>');
infoWindow.open(map);

对于所有的意图和目的，谷歌地图临时地方 div在您的网页结束(实际上它创建了一个 ABC1-但是从概念上更容易理解，如果我说你想象一个 div在你的页面末尾的位置)与 HTML 内容，您指定。然后测量 div (这意味着，在这个例子中，我的文档中应用于 h1的 CSS 规则和应用于它的 p标记)以获得它的 width和 height。然后，谷歌获取这个 div，分配它的测量值，当它被附加到您的页面时，它得到的，并将它放在地图上您指定的位置。

这就是问题发生在很多人身上的地方——他们可能有这样的 HTML:

<body>
<div id="map-canvas"><!-- google map goes here --></div>
</body>

不管什么原因，CSS 看起来像这样:

h1 { font-size: 18px; }
#map-canvas h1 { font-size: 32px; }

你能看出问题所在吗？当 API 尝试为你的 infoWindow测量时(在显示之前) ，内容的 h1部分将有一个 18px的大小(因为临时的“测量 div”被附加到主体) ，但是当 API 实际上将 infoWindow放置在地图上时，#map-canvas h1选择器将优先导致字体大小与 API 测量 infoWindow大小时的大小有很大的不同，在这种情况下，你将得到总是滚动条。

在 infoWindow中为什么有滚动条的具体原因可能有更多的细微差别，但它背后的原因是这样的:

相同的 CSS 规则必须应用于 infoWindow中的内容不管实际的 HTML 元素出现在标记中的哪个位置他们不，那么你将保证得到滚动条在你的资讯窗口

所以我总是这样做:

infoWindow.setContent('<div class="info-window-content">...your content here...</div>');

在我的 CSS 中:

.info-window-content { ... }
.info-window-content h1 { .... }
.info-window-content p { ... }
etc...

因此，无论 API 在哪里附加它的度量值 div-在关闭 body之前或在 #map-canvas之内，应用于它的 CSS 规则总是相同的。

编辑回复: 字体家族

Google 似乎正在积极解决字体加载问题(如下所述) ，而且功能最近也发生了变化，所以当你的 infoWindow第一次打开时，你可能会看到或可能看不到 Roboto 字体加载，这取决于你使用的 API 的版本。有一个开放的错误报告(即使在更改日志这个错误报告已经标记为固定) ，说明谷歌仍然有这个问题的困难。

还有一件事: 小心你的字体家族! ! ！

在这个 API 的最新版本中，google 试图巧妙地将 infoWindow 的内容封装在一个 CSS 选择器 .gm-style-iw中。对于那些不理解我上面解释的规则的人来说，这并没有真正的帮助，在某些情况下甚至使情况变得更糟。滚动条几乎总是在第一次打开 infoWindow的时候出现，但是如果你再次打开任何 infoWindow，即使使用 完全相同的内容，滚动条也会消失。说真的，如果你之前不困惑这会让你失去理智。事情是这样的:

如果你看看谷歌加载 API 时页面上的样式，你会发现:

.gm-style {
font-family: Roboto,Arial,sans-serif
...
}

好的，所以谷歌希望通过使用 Roboto字体系列使得它的地图更加一致。问题是，对于大多数人来说，在你打开 infoWindow之前，浏览器还没有下载 Roboto字体(因为你的页面上没有其他任何东西使用它，所以浏览器足够聪明，知道它不需要下载这种字体)。下载这种字体并不是即时的，尽管它非常快。当你第一次打开一个 infoWindow，API 将 div和你的 infoWindow内容附加到主体上进行测量时，它开始下载 Roboto字体，但是在 Roboto完成下载之前，你的 infoWindow's测量已经完成，窗口也被放置在地图上。结果往往是一个 infoWindow，当它的内容使用 infoWindow0或 infoWindow1字体渲染时，它的测量值被采取，但是当它显示在地图上(而且 Roboto已经完成下载) ，它的内容被显示在一个不同的字体大小-瞧-滚动条出现在你第一次打开 infoWindow。第二次打开完全相同的 infoWindow-此时 Roboto已经被下载，当 API 对 infoWindow内容进行测量时将被使用，而且你不会看到任何滚动条。

小开

从 2014年中开始，似乎有一个影响多个浏览器的 Google Maps v3中的 InfoWindow 调整错误。

据报道:
Https://code.google.com/p/gmaps-api-issues/issues/detail?id=5713
(还有这里的 JSFiddle 演示)
请点击上面问题的星星投票，为它被修复！

从我所有的测试，它似乎是 与元件尺寸舍入误差有关，因为它只出现在一些字体大小。

糟糕的解决办法:

在尝试了这个页面上的大多数建议之后，下面是 不是好的解决方案:

overflow: hidden(可能会切断内容)
white-space: nowrap(可能会切断内容)
传递 jQuery 对象或 DOM 节点(内容可能在 InfoWindow 之外溢出)
在打开 InfoWindow 内容后设置该内容(单独设置该内容没有帮助)
从 Roboto 改变字体(任何字体都可能出现这种问题)

一个可能的解决方案是给你的 InfoWindow 设置一个固定的宽度(比如那些建议设置最大宽度和最小宽度的人) ，但是当你有很多标记和内容的数量波动时，这并不理想。这也不利于移动/响应式设计。

一个合理的解决办法:

因此，在谷歌解决这个问题之前，我不得不构建一个变通方案。经过大约12个多小时的测试和调试，我得出了以下结论:

这样做没有有相同的缺点作为其他建议。

不应该剪裁内容(除非您有超过 InfoWindow 宽度的大图像)。
添加垂直滚动条，但仅在必要时添加。
任何内容都不应该在 InfoWindow 之外溢出
在大多数情况下，InfoWindow 会自动调整大小以适应内容(不是固定大小)
应该适合移动和响应布局
边距，填充，字体都能正常工作

缺点:

我的版本需要 jQuery，但是它可能会被改写为纯 JS
它在内容的右侧创建了20px 的填充，以便在需要时为滚动条腾出空间。如果愿意，您可以跳过这一步，或者进行更多的检查，以便在必要时只添加填充。
它相当粗糙，但是没有编辑谷歌的 javascript，这可能是唯一的方法。

在 Github 上查看代码

请提交改进和更正，因为你发现他们。

Google Maps API v3: InfoWindow 大小不正确

糟糕的解决办法:

一个合理的解决办法:

缺点:

在 Github 上查看代码