带有 Bootstrap 3 和 jQuery 的 Google Map v3 的信息窗口在 Google Chrome 中无法正常工作答案

【问题标题】：Info Window of Google Map v3 with Bootstrap 3 and jQuery not working perfectly in Google Chrome带有 Bootstrap 3 和 jQuery 的 Google Map v3 的信息窗口在 Google Chrome 中无法正常工作
【发布时间】：2015-04-15 12:23:43
【问题描述】：

我正在尝试创建一个包含一些点击事件的信息窗口。

但它并不完美。

我在 jQuery 中所做的代码是-

var infowindow = new google.maps.InfoWindow();

var contentString   =   '<div class="panel panel-default" lat="'+locations[i][1]+'" lon="'+locations[i][2]+'">'
                        +'<!-- Default panel contents -->'
                        +'<div class="panel-heading city_name">'
                            +locations[i][0]
                            +'<span style="float : right;margin-left: 5px;">'
                                +'<img src="img/detailed_information.png" class="detailed_information_image detailed_information_map_button" data-toggle="tooltip" data-placement="right" title="Detailed Information">'
                            +'</span>'
                            +'<span style="float : right">'
                                +'<img src="img/set_radious.png" class="set_radious_image change_center_map_button" data-toggle="tooltip" data-placement="left" title="Set Map Center">'
                            +'</span>'
                        +'</div>'
                        +'<div class="panel-body">'
                            +'<table>'
                                +'<tr>'
                                    +'<td class="td_list_center list_item_10 temparature">'
                                        +'19&deg;'
                                    +'</td>'
                                    +'<td class="td_list_center list_item_10">'
                                        +'<object data="svg/cloudDrizzleSun.svg" type="image/svg+xml">'
                                            +'<img src="img/svg-not-supported.png" />'
                                        +'</object>'
                                        +'<!-- <img src="svg/cloudDrizzleSun.svg" /> -->'
                                    +'</td>'
                                    +'<td class="td_list_center list_item_60 seperated_left">'
                                        +'<table>'
                                            +'<tr>'
                                                +'<td class="td_list_center status">'
                                                    +'<table>'
                                                        +'<tr>'
                                                            +'<td>'
                                                                +'<img src="img/umbrella.png" alt="Umbrella Logo Dark Small">'
                                                                +'<span id="humidity_value">280</span> mm'
                                                            +'</td>'
                                                            +'<td>'
                                                                +'<img src="img/wind.png" alt="Wind Logo Dark Small">'
                                                                +'<span id="wind_speed">280</span> km/h'
                                                            +'</td>'
                                                            +'<td>'
                                                                +'<img src="img/temperature.png" alt="Umbrella Logo Dark Small">'
                                                                +'<span id="temperature_speed">280</span>&deg; K'
                                                            +'</td>'
                                                        +'</tr>'
                                                    +'</table>'
                                                +'</td>'
                                            +'</tr>'
                                            +'<tr>'
                                                +'<td class="td_list_center distance">'
                                                    +'By car 127 KM - 2hr 6 min.'
                                                +'</td>'
                                            +'</tr>'
                                        +'</table>'
                                    +'</td>'
                                +'</tr>'
                            +'</table>'
                        +'</div>'
                    +'</div>';

        infowindow.setContent(  contentString   );
        infowindow.open(map, marker);

并在 Firefox 中获得类似的输出-

但是在 Chrome 中获得类似的输出-

谁能帮帮我？

提前感谢您的帮助

【问题讨论】：

您可能希望设置 div 的宽度，使其不会超过特定大小，
是的，有没有办法在谷歌地图信息窗口中设置最大宽度和高度？
不，只是与地图信息窗口关联的图标。但是由于您使用 html 来定义您的信息窗口，因此请在您的 div 样式中设置最大宽度，style="max-width: 100px;"

标签： javascript jquery twitter-bootstrap google-maps google-maps-api-3

【解决方案1】：

如 cmets 中所述，您可能希望在 HTML 中或使用 CSS 设置内容宽度。除此之外，infowindows 还有一个maxWidth 属性。

maxWidth 指定信息窗口的最大宽度（以像素为单位）。默认情况下，信息窗口会展开以适应其内容，并在信息窗口填满地图时自动换行文本。如果您添加maxWidth，信息窗口将自动换行以强制指定宽度。如果达到最大宽度并且屏幕上有垂直空间，则信息窗口可能会垂直扩展。

https://developers.google.com/maps/documentation/javascript/infowindows

附加信息：

maxWidth 信息窗口的最大宽度，与内容的宽度无关。只有在调用 open 之前设置该值时才考虑该值。要在更改内容时更改最大宽度，请调用 close、setOptions，然后再打开。

https://developers.google.com/maps/documentation/javascript/reference#InfoWindow

【讨论】：