Google Maps API v3：InfoWindow没有正确resize
当我在我的Google Maps v3上点击主页图标时，出现我的InfoWindow，它没有正确自动调整InfoWindow的内容。
它不应该给滚动条。 InfoWindow应该适当地自动resize。
任何想法为什么？
根据请求，为InfoWindow注入HTML的相关JavaScript：
listing = '<div>Content goes here</div>'; 在你的infowindow中添加一个div
<div id=\"mydiv\">YourContent</div>
然后使用CSS设置大小。 为我工作。 这asumes所有infowindows是相同的大小！
#mydiv{ width:500px; height:100px; }
简短的回答： 在构造函数中设置maxWidth选项属性 。 是的，即使设置最大宽度不是你想要做的。
更长的故事：将v2映射迁移到v3，我看到了所描述的问题。 Windows的宽度和高度各不相同，有些是垂直滚动条，有些则没有。 有些人已经embedded了数据，但至less有一个大小合适。
我不认为InfoWindowsOptions.maxWidth属性是相关的，因为我不在意限制宽度…但通过使用InfoWindow构造函数设置它，我得到了我想要的，窗口现在自动（纵向）和显示没有垂直滚动条的全部内容。 对我来说没有什么意义，但是它起作用了！
请参阅： http ： //fortboise.org/maps/sailing-spots.html
您应该将内容从jQuery对象提供给InfoWindow。
var $infoWindowContent = $("<div class='infowin-content'>Content goes here</div>"); var infoWindow = new google.maps.InfoWindow(); infowindow.setContent($infoWindowContent[0]);
.gm-style-iw{ height: 100% !important; overflow: hidden !important; }
它适用于我
编辑（突出）：相信我，在这个问题的其他答案中，这是唯一正确的，也解释为什么这是发生
好的，所以我知道这个线程是老的，有一千个答案，但是没有一个是正确的 ，我觉得需要发布正确的答案。
首先，你不需要指定width's或height's任何东西，为了让你的信息窗口显示没有滚动条，虽然有时你可能会意外地得到它的工作（但它最终会失败）。
其次，Google Maps API的infoWindow's 没有滚动的错误，只是很难find正确的信息。 那么，这里是：
当您告诉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在你的页面的末尾（ 实际上它创build了一个detached DOM tree – 但是在概念上更容易理解，如果我说你想象div被放置在页面的最后 ）与您指定的HTML内容。 然后测量这个div（这意味着，在这个例子中，我的文档中的任何CSS规则都适用于h1和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”被附加到body中），但是当API实际上将infoWindow放置在地图上， #map-canvas h1select器将优先使字体大小与API测量infoWindow大小时的大小infoWindow ，在这种情况下，您将始终获得滚动条。
可能会有更细微的细微差别，为什么你有你的信息infoWindow滚动条的具体原因，但背后的原因是因为：
无论实际HTML元素在标记中出现的位置如何，相同的CSS规则必须应用于
infoWindow内的内容。 如果他们不这样做，那么你将保证在你的infoWindow中获得滚动条
所以我总是这样做，就是这样的：
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 ，在closuresbody之前或在#map-canvas内部，应用于它的CSS规则将始终相同。
编辑RE：字体家庭
Google似乎正在积极研究字体加载问题（下面将进行介绍），并且function在最近才发生变化，所以当您第一次打开infoWindow时，您可能会也可能不会看到Roboto字体加载，具体取决于您使用的API的版本。 有一个开放的错误报告（即使在更新日志中这个错误报告已经被标记为固定），说明谷歌仍然有这个问题的困难。
一件事：看你的家庭！
在API的最新版本中，Google试图很聪明，将它的infoWindow内容封装在一个可以用CSSselect器（ .gm-style-iw作为目标的东西中。 对于那些不了解我上面解释过的规则的人来说，这并没有真正的帮助，有时甚至更糟。 滚动条几乎总是在第一次打开infoWindow时出现，但是如果再次打开任何infoWindow ，即使滚动条的内容完全相同 ，滚动条也会消失。 严重的是，如果你没有困惑，这会让你失去理智。 以下是发生的事情：
如果您查看在API加载时Google在页面上加载的样式，您将能够看到以下内容：
.gm-style { font-family: Roboto,Arial,sans-serif ... }
好的，所以Google希望通过始终使用Roboto字体系列使地图更加一致。 问题是，对于大多数人来说，在你打开一个infoWindow之前，浏览器还没有下载Roboto字体（因为你的页面上没有其他东西使用它，所以浏览器足够聪明，知道它不需要下载这个字体）。 即使速度非常快，下载这种字体也不是即时的。 当你第一次打开一个infoWindow ，并且API将你的infoWindow内容添加到body来测量的时候，它开始下载Roboto字体，但是在你完成下载之前，你的infoWindow's测量值会被放到地图上。 。 其结果经常是一个infoWindow ，当它的内容是使用Arial或者sans-serif字体呈现的时候进行测量的，但是当它被显示在地图上（并且Roboto已经完成下载）时，它的内容被显示为字体这是一个不同的大小 – 瞧 – 第一次打开infoWindow出现滚动条。 第二次打开完全相同的infoWindow – 在这一点上，已经下载了Roboto并且在API正在测量infoWindow内容并且不会看到任何滚动条时将被使用。
我尝试了列出的每一个答案。 没有为我工作。 这终于固定下来了。 我inheritance的代码有一个围绕所有<h#>和<p>条目的DIV包装器。 我只是在同一个DIV中强制一些“样式”，考虑到所需的最大宽度，为了以防万一（别人的修正）和我自己white-space: nowrap ，然后使自动溢出正确的调整。 没有滚动条，没有截断，没有问题！
html = '<div class="map-overlay" style="max-width: 400px; line-height: normal; white-space: nowrap; overflow: auto; ">';
我知道这是一个古老的线程，但我只是遇到了同样的问题。 我在InfoWindow中有<h2>和<p>元素，并且这两个元素都有底部边距。 我删除了边距，InfoWindow大小正确。 没有其他build议的修复工作。 我怀疑InfoWindow大小计算不考虑边距。
将我的答案添加到列表中，因为没有这些解决了我的问题。 我结束了我的内容包装在一个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; }
我已经尝试了所有这些解决scheme，没有任何工作。 经过一些试验和错误，我find了答案。
<style type="text/css"> #map_canvas { line-height:normal; } </style>
为地图canvasdiv设置line-height：normal。
看来，问题是与Roboto webfont。
infowindow根据提供的内容使用内联宽度和高度属性进行呈现。 但是，它不是已经呈现/加载的webfont计算。 一旦字体在整个地图打印到屏幕后呈现，那么由于窗口的DIV内embedded了“overflow：auto”属性，会导致滚动条出现。
我发现解决scheme的工作是将内容包装在DIV中，然后应用CSS来覆盖WebFont：
.gmap_infowin { font-family: sans-serif !important; font-weight: normal !important; } <div class="gmap_infowin">Your info window content here.</div>
有趣的是，下面的代码将更正WIDTH滚动条：
.gm-style-iw { overflow: hidden !important; line-height: 1.35; }
它用这个来修正HEIGHT滚动条：
.gm-style-iw div { overflow: hidden !important; }
编辑：添加空白：nowrap; 任何一种风格都可以纠正当滚动条被移除时似乎依然存在的间距问题。 好点Nathan。
这对我有用。 把一个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地图。
这彻底解决了我的问题：
.gm-style-iw { overflow: visible !important; height: auto !important; width: auto !important; }
我遇到了与IE相同的问题，并尝试了许多在这些响应中详细解决的问题，但是无法可靠地删除IE中的垂直滚动条。
最适合我的是切换到infowindow中的固定字体大小 – 'px'…我使用的是ems。 通过固定字体大小，我不再需要显式声明infowindow宽度或高度，并且滚动条消失了。
地图容器的高度也很重要。 如果小infoWindow总是会在80px高度。 否则， maxWidth和#innerDiv修复就像一个魅力。
如果没有别的，尝试添加窗口打开后的内容。 这应该强制它resize。
infoWindow = new google.maps.InfoWindow() infoWindow.open(map, marker) infoWindow.setContent(content)
使用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），但有时如果内容（即：图片）加载时间过长，仍然不起作用。
希望这对你有用。
我遇到了同样的问题，特别是当我的<h2>元素换行到第二行时。
我将一个类应用到infoWindow中的一个<div> ，并将字体更改为一个通用的系统字体（在我的情况下是Helvetica），而不是它使用的@ font-face web字体。 问题解决了。
//infowindow.setContent(response); var infowindowopts = { maxWidth: 274, content: response }; infowindow.setOptions(infowindowopts);
为您的infoWindow类元素添加一个min-height 。
这将解决这个问题，如果你的infoWindows都是相同的大小。
如果没有，将这行jQuery添加到infoWindow的点击函数中：
//remove overflow scrollbars $('#myDiv').parent().css('overflow','');
我不能以任何forms或forms来工作，我包括3个盒子。 我把它们包在一个外部的div里，宽度和高度都设置正确，没有任何工作。
最后，我通过将div设置为绝对左上angular来固定它，然后在div之前，我设置了两幅图像，一幅宽300px，高1px，高120px，宽1px，透明gif。
然后它正确缩放！
它的丑陋，但它的作品。
你也可以做一个图像，并设置我期望的zindex，或者甚至只有一个图像，如果你的窗口没有交互，但这是包含一个表单，所以，这不是一个选项…
我认为这种行为是因为在外部容器中的一些CSS样式，我有同样的问题，但我解决了它使用内部的div添加一些填充，我知道这是奇怪的，但它解决了问题
<div id="fix_height"> <h2>Title</h2> <p>Something</p> </div>
在我的style.css
div#fix_height{ padding: 5px; }
我有一个内嵌元素（一个标签）直接在div与style="overflow:auto"[...包装，在一个p标签，并修复它。
看起来像任何内嵌元素不嵌套在infowindow内直接在块元素将导致此。
我的答案是添加一个侦听器（使用addListenerOnce）来检查infoWindow是否已经添加到DOM，然后再次打开infoWindow（不需要closures它）。
// 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); });
添加以下内容到我的CSS为我做了诡计：
white-space: nowrap;
只是要总结所有浏览器中为我工作的解决scheme：
- 不要在infowindow中使用边距，只能使用填充。
-
为infowindow设置最大宽度：
this.infowindow = new google.maps.InfoWindow({ maxWidth: 200 }); -
用infowindow包装内容
<div style="overflow:hidden;line-height:1.35;min-width:200px;">*CONTENT*</div>（更改您在infowindow maxWidth上设置的值的最小宽度）
我已经testing了它，它在每个浏览器上都有效，而且我有超过400个标记。
我知道很多其他人已经find解决scheme，为他们的具体情况工作，但由于没有一个人为我的具体情况工作，我认为这可能有助于其他人。
一些细节：
我正在使用谷歌地图API v3项目，其中内联CSS是我们真正想要避免的事情。 我的infowindows工作的一切除了IE11，其中宽度计算不正确。 这导致div溢出，触发滚动条。
我必须做三件事情：
-
从infowindow内容中删除所有显示：内嵌块样式规则（我用display：block代替） – 我想到了从一个线程（我再也找不到这个线程）尝试这个了，问题与IE6。
-
将内容作为DOM节点传递，而不是string。 我正在使用jQuery，所以我可以通过replace：
infowindow.setContent(infoWindowDiv.html());与infowindow.setContent($(infoWindowDiv.html())[0]);这对我来说是最简单的，但是还有很多其他方法可以得到相同的结果。 -
使用“setMaxWidth”hack – 在构造函数中设置MaxWidth选项 – 设置后面的选项不起作用。 如果你真的不想要一个最大宽度，只需将其设置为一个非常大的数字。
我不知道为什么这些工作，我不知道如果他们的子集将工作。 我知道，他们中的任何一个都不能为我的所有用例单独工作，并且2 + 3不起作用。 我没有时间testing1 + 2或1 + 3。
我不能接受硬编码信息窗口的宽度和高度，或者设置white-space: nowrap ， maxWidth解决scheme不能帮助我，而其他所有的东西都不起作用或者不适合我用例。
我的解决scheme是设置内容，打开窗口，然后当触发domready事件时，将内容的height CSS属性设置为任何高度，然后强制Google地图相应地调整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);
（我在类似的问题上发布了相同的解决scheme如何获取google-maps InfoWindow来resize以适应内置的内容？ ）
在浪费时间和阅读了一段时间之后，我只想简单一点，这个CSS符合我的要求。
.gm-style-iw > div { overflow: hidden !important; }
也不是一个即时的解决scheme，但主题/评论的问题可能会使他们修复它，因为他们认为它是固定的： http ： //code.google.com/p/gmaps-api-issues/issues/detail？id = 5713
那么这就是为我做的伎俩：
.gm-style-iw>div { overflow: visible !important; }
只有设置overflow: visible在.gm-style-iw上overflow: visible ，实际上使问题变得更糟！ I noticed in the Chrome developer tools inspector that there are two divs inside the .gm-style-iw element, both which have overflow: auto set by default.
I'm displaying quite a lot of HTML-formatted text in my InfoWindows, that might be why the other solutions didn't work at all for me.
