google maps v3改变了infowindow的大小

Question

我想设置一个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

Answer 1

您要做的是将"标准"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);
        });
}

Answer 2

如果他们偶然发现这个话题,那么每个人都很清楚.

您需要做的就是在信息窗口内容中设置容器的高度和宽度.

您不需要覆盖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的宽度即可.

Answer 3

对我来说这个CSS工作正常:

.gm-style-iw {
  width: 324px !important;
  height: 120px !important;
}