如何在Javascript中使用Google Maps InfoWindow（v3 API）

是的。这是Google Maps API v3: InfoWindow not sizing correctly的重复。
然而，没有对这个问题提供的解决方案的工作对我来说:(

代码：如何在Javascript中使用Google Maps InfoWindow（v3 API）

//after getting a 'position' object: 
var mapPos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
var mapOptions = { zoom:16, center:mapPos,mapTypeId:google.maps.MapTypeId.ROADMAP }; 
var yourLocationMap = new google.maps.Map(document.getElementById('locationMap'), mapOptions); 

var infoContent = '<div style="width:40px;height:20px;">some information content...</div>'; 
var infoBaloon = new google.maps.InfoWindow({position:mapPos, content:infoContent, maxWidth:40}); 
infoBaloon.open(yourLocationMap);

这是HTML谷歌地图创建的信息窗口在地图上的顶部：

<div style="width: 247px; height: 88px;"> //<-This is actually the size of the info 
window. I have no idea on what basis it decides on these dimensions. 

    //next is the div for the 'X'(close) button: 
    <div style="width: 10px; height: 10px; overflow: hidden; position: absolute; opacity: 0.7; left: 12px; top: 12px; z-index: 10000; cursor: pointer;"> 
     <img src="http://maps.gstatic.com/mapfiles/mv/imgs8.png" style="position: absolute; left: -18px; top: -44px; width: 68px; height: 67px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"></div><div style="cursor: default; position: absolute; right: 18px; top: 18px; z-index: 2; overflow: auto; width: 213px; height: 54px;"> 
    </div> 

    // I don't know where this div is coming from... :\ 
    <div style="cursor: default; position: absolute; right: 18px; top: 18px; z-index: 2; overflow: auto; width: 213px; height: 54px;"> 
     <div style="overflow: auto;"> 

      **// and then, finally, the div I put in the Content of the InfoWindow: 
      <div style="width:40px;height:20px;">Some content information...</div>** 
     </div> 
    </div> 
</div>

庵，帮助

？

备注：#locationMap div的尺寸（未包含在代码示例中）具有样式。地图的表示方式没有任何问题 - 只是InfoWindow的表示方式，无论我将其内容设置为什么，它总是宽度为247像素...

来源

2012-02-04 Yuval A.

难道是247px的信息窗口的最小宽度？我发现的唯一种类的“证据”在本文中： http://www.svennerberg.com/2009/02/working-with-info-windows-in-google-maps/ – 2012-02-04 17:53:43

上述问题解决方案仅仅因为它适用于Google地图v2而不起作用。我使用jQuery来动态更新infowindow大小，但我想它就像修复代码一样。所以更好的是停止专注于此并尽可能地改变功能（表示） – Jaykishan 2013-12-31 13:45:08

不确定是否有帮助，但我发现实际上有两件事控制了google地图中infoWindow的高度。

信息窗口，并适用于信息窗口内容的CSS的内容（大多数人都深知这一点）
（和什么可能是最容易混淆）的谷歌地图画布本身的高度！！

我有一个设置为250px高的画布，无论我如何设置放置在infoWindow中的内容，它仍然是88px的固定高度并出现滚动条。一旦我将画布放大一点（300px），infoWindow的最大高度也发生了变化。

如果您认为自己做了一切正确的事情，请调整infoWindow的大小，最后的办法是让您的画布稍大一些。

祝你好运！

来源

2012-06-09 16:27:08 Adam

如何在Javascript中使用Google Maps InfoWindow（v3 API）

回答

相关问题