即使设置正确，Google地图InfoWindow宽度也会被覆盖

Question

我使用的是Google Maps API，但我遇到了InfoWindow的麻烦。

以下是摘要：

  
• 我在用户点击标记时加载InfoWindow的内容
  
• 内容是部分视图，由于Ajax调用而加载
  
• 在.done回调中，我调用了一个异步方法，该方法将数据插入到InfoWindow内容中。我需要这样做，因为我希望InfoWindow主要内容能够立即显示，而这个＆＃34;奖励＆＃34;信息可以在十分之几秒后显示。

这完美有效;但我的InfoWindow右侧有一条白色条带，我无法移除（见下图）

但是，我加载的内容包含在具有固定<div>的{​​{1}}中：

width

在我的CSS中，我写道：

<div id="div-main-infoWindow">
    <!-- All my content -->
</div>

InfoWindow的加载以及更多细节如下所示：

#div-main-infoWindow {
    width:342px !important;
}

内容完全没问题，问题就在于这个白色条带。

查看我的浏览器控制台（我在所有浏览器中重现），我可以看到：

正如你在那里看到的那样，我的$.ajax({ url : "/my-url", async : false, contentType : "application/json; charset=utf-8", dataType : "json", type : "POST", data : JSON.stringify(myModel) }).done(function(response) { MarkerContent = response.Content; //The HTML content to display MyAsyncMethod().then(function(response) { //do some formatting with response return result; //result is just a small HTML string }).done(function(result1, result2) { //do some formatting with result1 and result2 $("#myNode").html(/*formatted result*/); }) //info is a global variable defined as new google.maps.InfoWindow() info.setOptions({ content: MarkerContent, maxWidth: 342 //To be sure }); info.open(map, marker); }); }); 包含从我的ajax调用加载的所有数据都是正常的（绿色矩形，对应于屏幕截图中的灰色区域），但上面的div（来自谷歌API本身，红色矩形）有更大的尺寸，问题是。

我发现的唯一方法是运行此jQuery脚本修改InfoWindow内部结构：

<div>

注意：$(".gm-style-iw").next().remove(); $(".gm-style-iw").prev().children().last().width(342); $(".gm-style-iw").prev().children(":nth-child(2)").width(342); $(".gm-style-iw").width(342); $(".gm-style-iw").children().first().css("overflow", "hidden"); $(".gm-style-iw").children().first().children().first().css("overflow", "hidden"); $(".gm-style-iw").parent().width(342); 是Google给出的包含InfoWindow所有内容的div的类名，该内容位于上面的屏幕截图中。我还在CSS中添加了这条规则：

gm-style-iw

它可以在控制台中运行，但是，在代码本身，.gm-style-iw { width: 342px !important; //also tried with 100% !important, not better } 回调或.done Google地图＆＃39;中编写时，它无效。事件...
但是，在这种情况下，如果我将上述jQuery脚本封装在domready中，它就可以了！我评论了异步方法，所以不是这个有罪的，但似乎setTimeout()被执行而100％的InfoWindow仍未显示 - 这是contrary to the doc。

我还尝试将domready移到info.setOptions回调之外，然后将其放在后面，没效果。

那么，我怎样才能显示＆＃34;正常＆＃34; InfoWindow右边没有白色条带？
我不想实现InfoBubble或其他自定义InfoWindow库。这是一个个人项目，我想了解问题的原因和所在。当然，找到解决方案。

感谢您的帮助！

Answer 1

比你想象的要复杂一点。

只是一些事情：

• 您是否注意到有一个关闭按钮？即使删除按钮，空间也会存在，因为API会根据此空间计算其他节点的大小
• 小费必须在中心
• 还有用于圆角边框和阴影的其他容器
• 将计算infoWindow的大小，使其适合视口
• 内容必须在需要时滚动
• 必须设置infowindow的位置（因此需要计算infowindow的确切高度）

基本上：所有这些都需要计算确切的大小和位置，infowindow中的大多数节点都是绝对定位的，它更像是在DTP中使用的技术，而不是在HTML文档中使用它。< / p>

此外：InfoWindows将经常修改以修复错误，今天有效的解决方案明天可能会被破坏。

但是，目前适合我的方法是：

1. 将infowindow的maxWidth设置为所需的宽度 - 51（在这种情况下为291）

2. 无法通过!important应用$.css - 规则，因此必须直接通过样式表来完成。为了能够访问所有元素，为infowindow的根节点设置了一个新类（请注意，可能存在无法控制的infoWindows，例如POI）：

   google.maps.event.addListener(infowindow,'domready',function(){ 
     $('#div-main-infoWindow')//the root of the content
      .closest('.gm-style-iw')
       .parent().addClass('custom-iw');
   });
   

3. CSS：

---

  .custom-iw .gm-style-iw {
      top:15px !important;
      left:0 !important;
      border-radius:2px;
  }
  .custom-iw>div:first-child>div:nth-child(2) {
      display:none;
  }
  /** the shadow **/
  .custom-iw>div:first-child>div:last-child {
      left:0 !important;
      top:0px;
      box-shadow: rgba(0, 0, 0, 0.6) 0px 1px 6px;
      z-index:-1 !important;
  }

  .custom-iw .gm-style-iw, 
  .custom-iw .gm-style-iw>div, 
  .custom-iw .gm-style-iw>div>div {
      width:100% !important;
      max-width:100% !important;
  }
  /** set here the width **/
  .custom-iw, 
  .custom-iw>div:first-child>div:last-child {
      width:342px !important;
  }


  /** set here the desired background-color **/
  #div-main-infoWindow, 
  .custom-iw>div:first-child>div:nth-child(n-1)>div>div, 
  .custom-iw>div>div:last-child, 
  .custom-iw .gm-style-iw, 
  .custom-iw .gm-style-iw>div, 
  .custom-iw .gm-style-iw>div>div {
      background-color:orange !important;
  }

  /** close-button(note that there may be a scrollbar) **/
  .custom-iw>div:last-child {
      top:1px !important;
      right:0 !important;
  }

  /** padding of the content **/
  #div-main-infoWindow {
      padding:6px;
  }

演示（正如我所说，明天可能会被打破）：http://jsfiddle.net/doktormolle/k57qojq7/

Answer 2

这里的派对迟到了，但在寻找年龄以达到与OP相同的事情后，我想到了一个想法。宽度似乎是由.gm-style-iw的父元素设置的，所以我只是将父元素宽度设置为自动使用jQuery和嘿presto！所以这是我的代码，希望它可以帮助将来的某个人。

JS

$('.gm-style-iw').parent().css('width', 'auto');

CSS

.gm-style-iw {
 width: auto !important;
 top: 0 !important;
 left: 0 !important;
}