我想设置infowindow的大小以适应内部的内容。标准infowindow太宽我尝试使用maxWidth但它似乎不起作用。调整信息窗口大小的最佳方法是什么?
见代码:
window.setContent( inspStates[i].name+ "<br/>"+"total: "+inspStates[i].totalInsp+ "<br/>"+ info);
将在气泡中显示的信息如下所示(\ n表示下一行)
NY \ ntotal 60 \ n2009:10 \ n2010:20 \ n2011:30
答案 0 :(得分:14)
您要做的是将“标准”Googlemaps infoWindow替换为您自己的,并将您的内容放入其中。更换标准GM infoWindow后,您可以使用很多自由度。我做的是这个:
添加一个名为#infoWindow的新样式ID,并设置其宽度。
#infoWindow {
width: 150px;
}
在我的Javascript中的任何函数之外,我创建了一个新的infoWindow:
var infoWindow = new google.maps.InfoWindow();
在函数中创建一个新的var,用于设置标记显示的信息,并将其值设置为内容:
var html = '<div id="infoWindow">';
html += 'NY<br />total 60<br />2009: 10<br />2010: 20<br />2011: 30';
html +='</div>';
使用您在其他位置创建的位置信息调用createMarker函数,并将html var作为参数之一包含在其中:
var marker = createMarker(point,name,html);
您将在其他地方声明的createMarker函数,它会将所有信息组合在一起,在地图上显示标记,并在点击时显示上面的信息:
function createMarker(latlng,name,html) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: name
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(contentString);
infoWindow.open(map,marker);
});
}
答案 1 :(得分:9)
如果他们偶然发现这个话题,那么每个人都很清楚。
您需要做的就是在信息窗口内容中设置容器的高度和宽度。
您无需覆盖Google类,也不需要过于复杂。
var contentString = '<div class="map-info-window">'+
'<h1>My Info Window</h1>'+
'<p>Hello World</p>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString, });
在我的CSS中我有这个:
.map-info-window {
width:200px;
height:200px;
}
就是这样。您只需设置Google Maps InfoWindow的宽度即可。
答案 2 :(得分:8)
对我来说,这个CSS工作正常:
.gm-style-iw {
width: 324px !important;
height: 120px !important;
}
答案 3 :(得分:2)
请查看以下API参考和示例:
Google Map V3示例: https://developers.google.com/maps/documentation/javascript/examples/
Google Map V3 API参考: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
答案 4 :(得分:1)
要在Google地图中设置气泡信息窗口的大小,只需在CSS文件中添加以下css即可:
.gmap-popup {
max-width:204px;
max-height:110px;
}
改编自this discussion。
答案 5 :(得分:0)
JFrancis答案是正确的,只是不要忘记在设置宽度时在CSS中添加“!important”!这可能看起来很小,但如果你不这样做,你的CSS就会被覆盖!
#infoWindow {
width: 150px !important;
}