Google Maps API v3 Street View Service 上的信息窗口大小错误答案

【问题标题】：Info Window wrong size on Google Maps API v3 Street View ServiceGoogle Maps API v3 Street View Service 上的信息窗口大小错误
【发布时间】：2013-10-10 17:22:06
【问题描述】：

设置：在同一页面上（在同一地图画布内），我有 2 个信息窗口。它们的 CSS 是相同的。内容非常相似。最初，街景全景加载时会打开一个信息窗口。信息窗口内的按钮用于在常规地图和街景之间切换。该地图显示了第二个信息窗口，其中显示了一个返回街景的按钮。

问题：一个信息窗口正在调整大小以适应内容，而另一个没有，因此它正在显示滚动条。我能看到的唯一区别是一个在常规的旧路线图上，另一个在街景全景图上。

我的尝试：我将两个信息窗口的 maxWidth 设置为 500（宽得离谱），并在 CSS 中为信息窗口的内部 div 设置了宽度和高度。

守则： 这是 CSS：

#map-canvas{
  height: 600px;
  width: 1000px;
}
#map-canvas .info-window {
  width: 250px;
  height: 230px;
}

完整的 JS 很长，在 jsfiddle 上。

演示： http://jsfiddle.net/rkXuk/1/

full screen demo

寻求帮助：这是怎么回事？为什么它们的渲染方式不同，我该如何解决？

【问题讨论】：

你试过使用内联css吗？
谢谢，成功了。我不知道为什么，但确实如此。您可以将此作为答案发布，我会将其标记为已接受吗？

标签： google-maps-api-3 infowindow google-street-view

【解决方案1】：

使用内联 CSS。

代替

.info-window {
    width: 250px;
    height: 230px;
}

用途：

// map info window
var contentString = '<div style="width:250px; height:230px;" class="info-window">' +
    '<h3>Hi, we\'re Cuberis</h3>' +
    '<table border="0" cellpadding="0" cellspacing="0" class="contact">' +
    '<tr>' +
    '<th scope="row">Email:</th>' +
    '<td>info@cuberis.com</td>' +
    '</tr>' +
    '<tr>' +
    '<th scope="row">Phone:</th>' +
    '<td>919.443.2254</td>' +
    '</tr>' +
    '<tr>' +
    '<th scope="row">Office:</th>' +
    '<td>Golden Belt - Building 2<br />' +
    '807 E. Main Street<br />' +
    'Suite 2-210<br />' +
    'Durham, NC 27701</td>' +
    '</tr>' +
    '</table>' +
    '<div class="contact">' +
    '<input type="button" class="button" value="See inside our office" onclick="toggleStreetView();"></input>' +
    '</div>';

还有：

// street view info window
var contentString2 = '<div style="width:250px; height:230px;" class="info-window">' +
    '<h3>Hi, we\'re Cuberis</h3>' +
    '<table border="0" cellpadding="0" cellspacing="0" class="contact">' +
    '<tr>' +
    '<th scope="row">Email:</th>' +
    '<td>info@cuberis.com</td>' +
    '</tr>' +
    '<tr>' +
    '<th scope="row">Phone:</th>' +
    '<td>919.443.2254</td>' +
    '</tr>' +
    '<tr>' +
    '<th scope="row">Office:</th>' +
    '<td>Golden Belt - Building 2<br />' +
    '807 E. Main Street<br />' +
    'Suite 2-210<br />' +
    'Durham, NC 27701</td>' +
    '</tr>' +
    '</table>' +
    '<div class="contact">' +
    '<input type="button" class="button" value="Check us out on the map" onclick="toggleStreetView();"></input>' +
    '</div>';

【讨论】：