谷歌地图信息窗口调整大小答案

【问题标题】：Google Maps Info window resizing谷歌地图信息窗口调整大小
【发布时间】：2013-03-02 22:09:09
【问题描述】：

我有一个 API V3 地图，每个标记都有一个内容窗口。每个标记都有一个包含 .SVG 文件的信息窗口。信息窗口的内容跨越多行，但信息窗口不会调整大小以适应所有内容，从而导致出现类似 iframe 的滚动。我什至不能关闭信息窗口。有没有人帮我解决我的问题。这是我的代码

function initialize(){

 var myCenter = new google.maps.LatLng(36.4333, -117.9509);
 var sfv = new google.maps.LatLng(34.18258, -118.43968);
 var sgv = new google.maps.LatLng(34.07959, -118.03335);
 var pasadena = new google.maps.LatLng(34.14778, -118.14452);
 var la = new google.maps.LatLng(34.05223, -118.24368);
 var oc = new google.maps.LatLng(33.71747, -117.83114);

 var imageBounds=new google.maps.LatLngBounds(
 new google.maps.LatLng(36.3943, -118.1050),
 new google.maps.LatLng(36.4735, -117.8529));
 var marker, marker1;

 var mapProp = {
 zoom:9,
 center:la,
 mapTypeId: google.maps.MapTypeId.ROADMAP}

 var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

 var marker=new google.maps.Marker({
 position:myCenter,
 animation:google.maps.Animation.BOUNCE
 });

 var marker1=new google.maps.Marker({
 position:sfv,
 animation:google.maps.Animation.BOUNCE
 });

 var marker2=new google.maps.Marker({
 position:sgv,
 animation:google.maps.Animation.BOUNCE
 });

 var marker3=new google.maps.Marker({
 position:pasadena,
 animation:google.maps.Animation.BOUNCE
 });

 var marker4=new google.maps.Marker({
 position:la,
 animation:google.maps.Animation.BOUNCE
 });

 var marker5=new google.maps.Marker({
 position:oc,
 animation:google.maps.Animation.BOUNCE
 });

 marker.setMap(map);
 marker1.setMap(map);
 marker2.setMap(map);
 marker3.setMap(map);
 marker4.setMap(map);
 marker5.setMap(map);    
 var infowindow = new google.maps.InfoWindow({
    content: '<IMG BORDER="0" ALIGN="Left" SRC="test.svg">'
    });
 var infowindow1 = new google.maps.InfoWindow({
    content: '<IMG BORDER="0" ALIGN="Left" SRC="test.svg">'
    });
 var infowindow2 = new google.maps.InfoWindow({
    content: '<IMG BORDER="0" ALIGN="Left" SRC="test.svg">'
    });
 var infowindow3 = new google.maps.InfoWindow({
    content: '<IMG BORDER="0" ALIGN="Left" SRC="test.svg">'
    });
 var infowindow4 = new google.maps.InfoWindow({
    content: '<IMG BORDER="0" ALIGN="Left" SRC="test.svg">'
    });
 var infowindow5 = new google.maps.InfoWindow({
     content: '<IMG BORDER="0" ALIGN="Left" SRC="test.svg">'
    });
     // event handlers for clicking
google.maps.event.addListener(marker, 'click', function(){
    infowindow.open(googleMap,marker);
    });   

google.maps.event.addListener(marker1, 'click', function(){
    infowindow1.open(googleMap,marker1);
    });   

google.maps.event.addListener(marker2, 'click', function(){
    infowindow2.open(googleMap,marker3);
    });   

google.maps.event.addListener(marker3, 'click', function(){
    infowindow3.open(googleMap,marker3);
    });   

google.maps.event.addListener(marker4, 'click', function(){
    infowindow4.open(googleMap,marker4);
    });   

google.maps.event.addListener(marker5, 'click', function(){
    infowindow5.open(googleMap,marker5);
    });   
  }

  google.maps.event.addDomListener(window, 'load', initialize);
 </script>
 </head>

 <body onload = "initialize()">
 <div id="googleMap" style="width:1080px;height:650px;"></div>
 </body>

【问题讨论】：

标签： google-maps-api-3

【解决方案1】：

您可以通过传入相关参数来设置最大宽度，如the docs 中所述：

var infowindow = new google.maps.InfoWindow({
    content: ...,
    maxWidth: 300
})