web-dev-qa-db-ja.com

Googleマップ：カスタムInfoWindowを作成する方法は？

マップマーカーのデフォルトのGoogle Maps InfoWindowは非常に丸いです。角が角のあるカスタムInfoWindowを作成するにはどうすればよいですか？

javascripthtmlcssgoogle-maps
99
SarahBeale

EDITいくつかの狩りの後、これが最良のオプションのようです：

https://github.com/googlemaps/js-info-bubble/blob/gh-pages/examples/example.html

Dive Seven、オンラインスキューバダイビングロギングのWebサイト で使用したこのInfoBubbleのカスタマイズバージョンを見ることができます。次のようになります。

Google デモを提供 これは、カスタム情報ウィンドウを実装する方法を示しています。かなりの量のコードが必要ですが、かなり簡単なようです。

さらにいくつかの例があります here 。ただし、スクリーンショットの例のように見栄えはよくありません。

83
Drew Noakes

Jqueryのみを使用してInfoWindow全体を変更できます...

var popup = new google.maps.InfoWindow({
    content:'<p id="hook">Hello World!</p>'
});

ここで、<p>要素は実際のInfoWindowへのフックとして機能します。 domreadyが起動すると、要素はアクティブになり、$('#hook').parent().parent().parent().parent()のようなjavascript/jqueryを使用してアクセス可能になります。

以下のコードは、InfoWindowの周囲に2ピクセルの境界線を設定するだけです。

google.maps.event.addListener(popup, 'domready', function() {
    var l = $('#hook').parent().parent().parent().siblings();
    for (var i = 0; i < l.length; i++) {
        if($(l[i]).css('z-index') == 'auto') {
            $(l[i]).css('border-radius', '16px 16px 16px 16px');
            $(l[i]).css('border', '2px solid red');
        }
    }
});

新しいCSSクラスの設定や、新しい要素の追加など、何でもできます。

必要なものを取得するために要素をいじってみてください...

17
ATOzTOA

InfoBoxは高度なスタイリングに最適であることがわかりました。

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

ページに http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/infobox/src/infobox.js を含める

8
Maulik Bengali

Vanilla javascriptを使用すると、情報ウィンドウのスタイル設定は非常に簡単です。これを書くときに、このスレッドからの情報の一部を使用しました。また、IEの以前のバージョンで発生する可能性のある問題も考慮しました（ただし、それらの問題はテストしていません）。

var infowindow = new google.maps.InfoWindow({
  content: '<div id="gm_content">'+contentString+'</div>'
});

google.maps.event.addListener(infowindow,'domready',function(){
  var el = document.getElementById('gm_content').parentNode.parentNode.parentNode;
  el.firstChild.setAttribute('class','closeInfoWindow');
  el.firstChild.setAttribute('title','Close Info Window');
  el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
  el.setAttribute('class','infoWindowContainer');
  for(var i=0; i<11; i++){
    el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
    el.style.display = 'none';
  }
});

このコードは、コンテンツを保持するためのIDを持つdivを使用して、通常どおり情報ウィンドウを作成します（プラグイン、カスタムオーバーレイ、または巨大なコードは不要です）。これにより、単純な外部スタイルシートで操作する正しい要素を取得するために使用できるシステム内のフックが提供されます。

情報ウィンドウのクローズ画像を含むdivにフックを与えるなどのことを処理するいくつかの余分な部分（厳密には必要ありません）があります。

最後のループは、ポインター矢印のすべての部分を隠します。情報ウィンドウを透明にし、矢印が邪魔になったので、自分でこれを必要としました。もちろん、フックを使用すると、コードを変更して矢印画像を任意のpngに置き換えることも非常に簡単です。

Jqueryに変更する場合（理由はわかりません）、それはかなり単純なはずです。

私は通常、javascript開発者ではありませんので、考え、コメント、批判は歓迎します:)

5
Rafe

以下のコードが役に立つかもしれません。

var infowindow = new google.maps.InfoWindow();
 google.maps.event.addListener(marker, 'mouseover', (function(marker) {
            return function() {
                var content = address;
                infowindow.setContent(content);
                infowindow.open(map, marker);
            }
          })(marker));

これを達成するのに役立った記事< Googleマップで複数の住所を完全なズームで見つける方法 >があります。 JS Fiddleリンクの動作と完全な例を参照することができます。

4
Ashish Gupta

以下のコードを使用して、スタイルのデフォルトのinforwindowを削除できます。 inforwindowのHTMLコードを使用した後：

var inforwindow = "<div style="border-radius: 50%"><img src='URL'></div>"; // show inforwindow image circle
marker.addListener('click', function() {
    $('.gm-style-iw').next().css({'height': '0px'}); //remove arrow bottom inforwindow
    $('.gm-style-iw').prev().html(''); //remove style default inforwindows
});
2
Teo Em

FWIX.comが具体的にどのようにそれを行っているのかはわかりませんが、 Custom Overlays を使用しているのではないでしょうか。

2
Scott Mitchell

ポップアップコンテナ/キャンバスに独自のcssクラスを追加することもできます。現在のGoogleマップ3.7には、canvas要素によってスタイル設定されたポップアップがあり、コード内にポップアップdivコンテナが追加されます。したがって、googlemaps 3.7では、次のようなポップアップのdomreadyイベントによってレンダリングプロセスに入ることができます。

var popup = new google.maps.InfoWindow();
google.maps.event.addListener(popup, 'domready', function() {
  if (this.content && this.content.parentNode && this.content.parentNode.parentNode) {
    if (this.content.parentNode.parentNode.previousElementSibling) {
      this.content.parentNode.parentNode.previousElementSibling.className = 'my-custom-popup-container-css-classname';
    }
  }
});

element.previousElementSiblingはIE8-に存在しないため、IE8-で機能させたい場合は、 follow this です。

イベントなどについては、最新のInfoWindowリファレンスを確認してください .

場合によってはこれが最もきれいであることがわかりました。

1
palmic

Googleの現在の情報ウィンドウの例に基づいた純粋なCSSソリューションは次のとおりです。

https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

#map *{
  overflow: visible;
}
#content{
  display: block;
  position: absolute;
  bottom: -8px;
  left: -20px;
  background-color: white;
  z-index: 10001;
}

これは、小さな情報ウィンドウに適した迅速なソリューションです。それが役立つ場合は、投票することを忘れないでください：P

1
Patch92

私が思いついた最良の答えはここにあると思います： https://codepen.io/sentrathis96/pen/yJPZGx

私はこれを信用することができません、私は実際にロードするためにGoogleマップの依存関係を修正するために別のcodepenユーザーからこれを分岐させました

次の呼び出しをメモします。

InfoWindow() // constructor
0
NomNomCameron