web-dev-qa-db-ja.com

InfoWindowの背景色を変更する方法

私は問題に直面しています、私のgoogle Map APIはデフォルトのInfoWindowを背景色が白で表示しています。白の色を黒の色に変更します。 REFコード：

google.maps.event.addListener(marker, 'mouseover', function() {


    infoWindow.setContent(html);
        infoWindow.open(map, marker);
               //infoWindow.setStyle("background-color: red");


      });
google-mapsgoogle-maps-api-3infowindow
8
prashanthi kontemukkala

私は簡単な解決策を思いつきました。これは非常に洗練されたソリューションではないかもしれませんが、スタイリングのニーズがあまりない場合はうまく機能します。

独自のhtmlを追加してスタイルを設定できるからです。マーカーの背景要素は、主に問題を引き起こす要素です。単純なスタイル設定の場合、まったく新しいライブラリを学習する代わりに、jQueryを使用してその要素を削除できます。

このコードをinit関数に挿入すると、背景要素が削除されます。

google.maps.event.addListenerOnce(map, 'idle', function(){
    jQuery('.gm-style-iw').prev('div').remove();
});

これで、自分のdivを自由にスタイルできます。このアプローチを使用して、プロジェクトでinfoWindowのスタイルを設定しました。 enter image description here

お役に立てば幸いです。

12
Awais Umar

Google Maps Utility のInfoBoxを使用できます。

このクラスはgoogle.maps.InfoWindowのように動作しますが、高度なスタイル設定のためにいくつかの追加プロパティをサポートしています。 InfoBoxは、マップラベルとしても使用できます。

[〜＃〜] css [〜＃〜]を使用してスタイルを設定することもできます。この チュートリアル と this を確認することで、それを行う方法のサンプルコードが表示されます。

3
KENdi