GoogleマップのInfoWindowサイズの確認

Question

Googleマップを使用してカスタムマーカーとカスタムテキストを情報ウィンドウに表示できるウィジェットを作成しました。このウィジェットはさまざまなテンプレートで使用できます。今問題は、異なるテンプレートがウィジェットのブロックサイズが異なることがあることです。 InfoWindowのサイズを知ることができるかどうかを知りたいのですが、それを基にして、infoWindoのサイズをbiggetしてからウィジェットのサイズを指定すると、より大きなマップを持つ詳細ページにユーザをリダイレクトします。

いずれかが情報ウィンドウのサイズを取得する方法を私はお勧めできます：後

たちはマップとinfoWindoを生成しているかの抜粋です：

var mapConf = { 
    center: somePoint, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    scrollwheel: false, 
    zoom: 12 
}, 
markerData = { 
    animation: google.maps.Animation.DROP, 
    position: somePoint, 
    title: 'Some random title' 
}, 
iconConf = getMarkerIcon($markerTypeIcon || 'hollowPin', { 
    fill: getColor($color_one) 
}) ; 

if(iconConf) { 
    iconConf.fillColor = iconConf.fill; 
    iconConf.strokeColor = iconConf.stroke; 
    markerData.icon = iconConf; 
} 

// create the map 
map = new google.maps.Map(document.getElementById('map-widget'), mapConf); 

// create infowindow 
infoWindow = new google.maps.InfoWindow(); 

// create marker 
marker = new google.maps.Marker(markerData); 

marker.setMap(map); 

var strContent = '<div id="content" style="width:170px; height: 100%;">' + 
         '<div id="add1">' + 
          '<b>'+ _config.dataName.getValue +'</b><br>' + _config.addressInfo +'</div>' + 
         '<div id="dataLink">' + 
          '<a onclick="javascript: window.parent.location.href='+ _config.strLink +'\'">GO</a>' + 
         '</div>' + 
        '</div>'; 

// set up property info window 
markerInfoWindow = new google.maps.InfoWindow({ 
     content: strContent, 
     position: somePoint, 
     maxWidth:600 
}); 

// add click event for marker to show info window 
google.maps.event.addListener(marker, 'click', function() { 
    markerInfoWindow.open(map, this); 
}); 

Answer 1

あなたはdiv要素のサイズを取得しようとしましdocumentに基づいて

// set up property info window 

    markerInfoWindow = new google.maps.InfoWindow({ 
      content: strContent, 
      position: somePoint, 
      maxWidth:600 
    }); 

// add click event for marker to show info window 

    google.maps.event.addListener(marker, 'click', function() { 
     maxWidth = document.getElementById('map-widget').offsetWidth; 
     // Or maxWidth = $('#map-widget').width(); 
     markerInfoWindow = new google.maps.InfoWindow({ 
       content: strContent, 
       position: somePoint, 
       maxWidth: maxWidth 
     }); 
     markerInfoWindow.open(map, this); 
    }); 

Answer 2

、maxWidthは内情報ウィンドウの最大幅を指定しますピクセル。デフォルトでは、情報ウィンドウはコンテンツに合わせて展開され、情報ウィンドウがマップを満たしている場合はテキストが自動ラップされます。 maxWidthを追加すると、情報ウィンドウが自動的に折り返されて指定された幅が適用されます。最大幅に達し、画面に垂直方向の余白がある場合、インフォメーションウィンドウが垂直方向に拡大されることがあります。

コンテンツのサイズを明示的に指定する場合は、<div>要素に配置し、CSSで<div>のスタイルを設定できます。 CSSを使ってスクロールを有効にすることもできます。スクロールを有効にせず、コンテンツが情報ウィンドウで使用可能なスペースを超えていると、コンテンツが情報ウィンドウから溢れることがあります。

infowindow内にdivを追加してみます。

<div class="myinfowindow"> </div> 

次に、CSSを使用してサイズを設定します。

.myinfowindow{ 
width:500px; 
height:100px; 
} 

さらに詳しい情報はSO questionにチェックしてください。