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 関数を呼び出し、引数の 1 つとして 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 に答える
8

私にとって、このCSSはうまく機能します：

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

次の API リファレンスと例をご覧ください。

Google マップ V3 の例: https://developers.google.com/maps/documentation/javascript/examples/

Google マップ V3 API リファレンス: https://developers.google.com/maps/documentation/javascript/reference#MapOptions

于 2013-01-06T08:12:24.387 に答える
0

JFrancis の回答は正しいものです。幅を設定するときに CSS に「!important」を追加することを忘れないでください。これは些細なことのように思えるかもしれませんが、これを行わないと、CSS が上書きされてしまいます!

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