谷歌地图V3更改信息窗口大小

Question

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

请参见代码：

    window.setContent( inspStates[i].name+ "<br/>"+"total: "+inspStates[i].totalInsp+ "<br/>"+ info);

气泡中显示的信息如下所示（\n表示换行）

纽约 \n总计60 \n2009年：10 \n2010年：20 \n2011年：30

- trs

Answer 1

你想要做的是用自己的内容替换“标准”的Googlemaps infoWindow。一旦你替换了标准GM infoWindow，你就有很多自由度来处理。我所做的是这样的：

添加一个名为#infoWindow的新样式ID，并设置它的宽度。

#infoWindow {
    width: 150px;
}

在我的JavaScript代码中，除了任何函数之外，我创建了一个新的infoWindow：

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

在函数内创建一个新的变量，用于设置标记显示的信息，并将其值设置为内容：

var html = '<div id="infoWindow">';
html += 'NY<br />total 60<br />2009: 10<br />2010: 20<br />2011: 30';
html +='</div>';

使用先前创建的位置信息调用createMarker函数，并将html变量作为其中一个参数包含：

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

- JFrancis

---

样式 ID 应该在哪里声明？在脚本内部还是外部？ - trs

将其余的CSS与页面上的其他内容一起使用，或者放在外部样式表中。 - JFrancis

Answer 2

明确一下，如果有人在这个帖子上遇到问题。

你只需要在信息窗口内容中设置容器的高度和宽度即可。

你不需要覆盖谷歌类，也不需要把事情变得过于复杂。

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的宽度。

- Halfstop

Answer 3

对于我来说，这个CSS很好用：

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

- kacper

---

非常感谢……我本来打算使用另一个插件来改变我的信息窗口的宽度和高度。 - Umair Ayub

Answer 4

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

Google地图V3示例： https://developers.google.com/maps/documentation/javascript/examples/ Google地图V3 API参考： https://developers.google.com/maps/documentation/javascript/reference#MapOptions

- Imtiaz Ahmad

---

有关maxWidth，请参见：https://google-developers.appspot.com/maps/documentation/javascript/examples/infowindow-simple-max - Attila Fulop

这如何作为一个答案有所帮助？ - Odys

Answer 5

要设置Google地图中气泡信息窗口的大小，只需在CSS文件中添加以下CSS：

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

改编自 此讨论。

- Druvision

Answer 6

JFrancis的回答是正确的，只是在设置宽度时不要忘记在CSS中添加"!important"！这可能看起来像一个小事情，但如果你不这样做，你的CSS将会被简单地覆盖掉！

#infoWindow {
    width: 150px !important;
}

- Poncho