Google maps api 3 google maps v3更改信息窗口的大小

Google maps api 3 google maps v3更改信息窗口的大小,google-maps-api-3,infowindow,Google Maps Api 3,Infowindow,我想设置一个信息窗口的大小以适应里面的内容。标准信息窗口太宽了,我尝试使用maxWidth,但似乎不起作用。调整信息窗口大小的最佳方法是什么 见代码: window.setContent( inspStates[i].name+ "<br/>"+"total: "+inspStates[i].totalInsp+ "<br/>"+ info); window.setContent(inspStates[i].name+“”+”总计:“+inspStates[i]

我想设置一个信息窗口的大小以适应里面的内容。标准信息窗口太宽了,我尝试使用maxWidth,但似乎不起作用。调整信息窗口大小的最佳方法是什么

见代码:

    window.setContent( inspStates[i].name+ "<br/>"+"total: "+inspStates[i].totalInsp+ "<br/>"+ info);
window.setContent(inspStates[i].name+“
”+”总计:“+inspStates[i].totalInsp+”
“+info);
气泡中显示的信息如下所示(\n表示下一行)


NY\ntotal 60\n2009:10\n2010:20\n2011:30

您要做的是用您自己的“标准”谷歌地图信息窗口替换“标准”谷歌地图信息窗口,并将您的内容放入其中。一旦你更换了标准的GM infoWindow,你就有了很大的自由度。我所做的是:

添加名为#infoWindow的新样式ID,并设置其宽度

#infoWindow {
    width: 150px;
}
在Javascript中的任何函数之外,我创建了一个新的信息窗口:

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函数,它将所有信息汇集在一起,在地图上显示标记,并在单击时显示上面的信息:

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

请查看以下API参考和示例:

谷歌地图V3示例:

谷歌地图V3 API参考:

JFrancis answers是正确的答案,只是在设置宽度时不要忘记在CSS中添加“!important”!这看起来可能是一件小事,但如果你不这么做,你的CSS就会被覆盖

#infoWindow {
    width: 150px !important;
}

要设置google地图中气泡信息窗口的大小,只需在css文件中添加以下css即可:

.gmap-popup {
  max-width:204px;
  max-height:110px;
}

改编自。

只要每个人都清楚,如果他们偶然发现了这条线索

您只需在信息窗口内容中设置容器的高度和宽度

您不需要覆盖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,   });

就这样。这就是设置Google Maps信息窗口宽度所需的全部操作。

对于我来说,此CSS工作正常:

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

样式id应该在哪里声明?在脚本内部或外部与其他CSS一起使用,无论是在页面上还是在外部样式表中。有关maxWidth,请参阅:作为答案,这有什么帮助?非常感谢。。。。我正要使用另一个插件来更改我的信息窗口的宽度和高度
.map-info-window {
    width:200px;
    height:200px;
}
.gm-style-iw {
  width: 324px !important;
  height: 120px !important;
}