web-dev-qa-db-ja.com

グーグルマップv3情報ウィンドウのサイズを変更

情報ウィンドウのサイズをコンテンツに合わせて設定したいと思います。標準の情報ウィンドウが広すぎるmaxWidthを使用しようとしましたが、機能しないようです。情報ウィンドウのサイズを変更する最良の方法は何ですか？

コードを参照してください：

    window.setContent( inspStates[i].name+ "<br/>"+"total: "+inspStates[i].totalInsp+ "<br/>"+ info);

バブルに表示される情報は次のようになります（\ nは次の行を意味します）

NY\n合計60\n2009：10\n2010：20\n2011：30

google-maps-api-3infowindow
9
trs

あなたがしたいのは、「標準の」Googlemaps infoWindowをあなた自身のものに置き換えて、あなたのコンテンツをそれに入れることです。標準のGM infoWindowを置き換えると、作業の自由度が高くなります。私がしたことは次のとおりです。

#infoWindowという新しいスタイルIDを追加し、その幅を設定します。

#infoWindow {
    width: 150px;
}

Javascript内の関数の外で、新しいinfoWindowを作成します。

var infoWindow = new google.maps.InfoWindow();

マーカーによって表示される情報を設定する関数内に新しい変数を作成し、その値をコンテンツに設定します。

var html = '<div id="infoWindow">';
html += 'NY<br />total 60<br />2009: 10<br />2010: 20<br />2011: 30';
html +='</div>';

他の場所で作成した場所情報を使用してcreateMarker関数を呼び出し、引数の1つとしてhtmlvarを含めます。

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);
        });
}
14
JFrancis

彼らがこのスレッドにつまずいた場合、誰もが明確です。

情報ウィンドウのコンテンツでコンテナの高さと幅を設定するだけです。

あなたはグーグルクラスをオーバーライドする必要はありません、そしてあなたはこれについて過度に複雑になる必要はありません。

var contentString = '<div class="map-info-window">'+
  '<h1>My Info Window</h1>'+
  '<p>Hello World</p>'+
  '</div>';

var infowindow = new google.maps.InfoWindow({
      content: contentString,   });

私のCSSにはこれがあります：

.map-info-window {
    width:200px;
    height:200px;
}

それでおしまい。 Googleマップ情報ウィンドウの幅を設定するために必要なのはこれだけです。

9
Halfstop

私にとって、このCSSは正常に機能します。

.gm-style-iw {
  width: 324px !important;
  height: 120px !important;
}
8
kacper

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

Google Map V3の例： https://developers.google.com/maps/documentation/javascript/examples/

Google Map V3 API参照： https://developers.google.com/maps/documentation/javascript/reference#MapOptions

2
Imtiaz Ahmad

グーグルマップ内のバブル情報ウィンドウのサイズを設定するには、CSSファイルに次のcssを追加するだけで十分です。

.gmap-popup {
  max-width:204px;
  max-height:110px;
}

この議論 から適応。

1
Druvision

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

#infoWindow {
    width: 150px !important;
}
0
Poncho