1

各マーカーのコンテンツ ウィンドウを備えた 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>
4

1 に答える 1

2

ドキュメントで説明されているように、関連するパラメーターを渡すことで最大幅を設定できます。

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

関連ドキュメント。

幅は 247 未満にはできないことに注意してください。高さの設定に関しては、そのための特定のパラメーターはありません。ただし、CSS を使用してそれを制御することはできます。img要素にmax-heightスタイルを与えるだけです。

于 2013-03-03T00:14:17.083 に答える