Google 即使设置正确，地图信息窗口宽度也会被覆盖

Question

我正在使用 Google 地图 API，我遇到了一些关于 InfoWindow 的问题。

这里是总结：

当用户点击标记时我正在加载 InfoWindow 的内容
内容是局部视图，通过 Ajax 调用
在 .done 回调中，我调用了一个将数据插入 InfoWindow 内容的异步方法。我需要这样做是因为我希望立即显示 InfoWindow 的主要内容，而此 "bonus" 信息可能会在十分之几秒后显示。

这非常有效；但是我的 InfoWindow 右侧有一个白色条带我无法删除（见下图）

但是，我加载的内容包含在 <div> 中，固定 width :

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

在我的 CSS 中，我写道：

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

InfoWindow 的加载以及更多详细信息如下所示：

$.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);
        });
});

内容完全OK，问题出在这条白条上

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

如您所见，我的 <div> 包含从我的 ajax 调用加载的所有数据，大小合适（绿色矩形，对应于屏幕截图中的灰色区域），但是上面的 divs（从 Google API 本身，进入红色矩形）有更大的尺寸，问题是。

我找到的唯一方法是运行这个 jQuery 修改 InfoWindow 内部结构的脚本：

$(".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);

注意：gm-style-iw是Google给div的class名称，包含了div的所有内容InfoWindow，悬停在上面的屏幕截图上。我还在 CSS 中添加了这条规则：

.gm-style-iw {
    width: 342px !important; //also tried with 100% !important, not better
}

它在控制台中有效，但是，在代码本身、.done 回调或 domready Google 地图事件中写入时，它不起作用。 ..
但是，在这种后期情况下，如果我将上面的 jQuery 脚本封装在 setTimeout() 中，它就可以工作了！！我评论了异步方法，所以不是这个有罪，但似乎 domready 已执行，而 InfoWindow 的 100% 仍未显示 - 即 contrary to the doc.

我也尝试将我的 info.setOptions 移到 .done 回调之外并将其放在它之后，但没有效果。

那么，如何显示 "normal" InfoWindow 而右边没有这个白色条带？
我不想实施 InfoBubble 或其他自定义 InfoWindow 库。这是一个个人项目，我想了解问题的原因和位置。当然，找到解决方案。

感谢您的帮助！

Answer 1

它比你想象的要复杂一点。

只是一些事情：

您是否注意到有一个关闭按钮？即使您删除按钮，space 也会在那里，因为 API 会根据此 space
尖端必须在中心
还有用于圆形边框和阴影的附加容器
将计算信息窗口的大小，使其适合视口
内容必须在需要时可以滚动
必须设置信息窗口的位置（因此需要计算信息窗口的准确高度）

基本上：所有这些都需要计算精确的大小和位置，信息窗口中的大多数节点都是绝对定位的，这是一种类似于在 DTP 中使用的技术，而不是在 HTML-文件.

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

但是，目前对我有用的方法是：

将信息窗口的 maxWidth 设置为所需的宽度 - 51（在本例中为 291）
无法通过 $.css 应用 !important-规则，因此必须直接通过样式表来完成。为了能够访问所有元素，为信息窗口的根节点设置一个新的 class（请注意，可能存在您无法控制的信息窗口，例如 POI）：
```
google.maps.event.addListener(infowindow,'domready',function(){ 
  $('#div-main-infoWindow')//the root of the content
   .closest('.gm-style-iw')
    .parent().addClass('custom-iw');
});
```
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;
  }

Demo（我说了，明天可能会坏掉）：http://jsfiddle.net/doktormolle/k57qojq7/

Answer 2

这里的派对有点晚了，但在寻找了很长时间来实现与 OP 相同的东西之后，我想到了一个想法。宽度似乎是由 .gm-style-iw 的父元素设置的，所以我只是使用 jQuery 将父元素宽度设置为 auto ，嘿！所以这是我的代码，希望它能在将来对某人有所帮助。

JS

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

CSS

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

Google 即使设置正确，地图信息窗口宽度也会被覆盖

Google Maps InfoWindow width is overwritten even when set correctly

google-maps

width

infowindow

google-maps-api-3