9

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

见代码：

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

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

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

4

6 回答 6

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);
        });
}
于 2011-07-18T20:45:45.953 回答
9

Just so everyone is clear, if they stumble on this thread.

All you need to do is set the height and width of a container in the your info window content.

You don't need to override google classes and you don't need to get overly complicated about this.

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

In my css I have this:

.map-info-window {
    width:200px;
    height:200px;
}

That's it. That's all you need to do to set the width of a Google Maps InfoWindow.

于 2014-07-04T03:13:12.100 回答
8

对我来说，这个 CSS 工作正常：

.gm-style-iw {
  width: 324px !important;
  height: 120px !important;
}
于 2014-09-09T09:46:56.253 回答
2

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

谷歌地图 V3 示例： https ://developers.google.com/maps/documentation/javascript/examples/

谷歌地图 V3 API 参考： https ://developers.google.com/maps/documentation/javascript/reference#MapOptions

于 2013-01-06T08:12:24.387 回答
1

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

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

改编自这个讨论。

于 2014-01-20T08:39:03.813 回答
0

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

#infoWindow {
    width: 150px !important;
}
于 2013-10-31T22:04:41.230 回答