マップマーカーのデフォルトのGoogleマップInfoWindowは非常に円形です。角が四角のカスタムInfoWindowを作成するにはどうすればよいですか？
回答:
編集いくつかの周りを探した後、これは最良の選択肢のようです：
https://github.com/googlemaps/js-info-bubble/blob/gh-pages/examples/example.html
オンラインスキューバダイビングログのウェブサイトであるDive Sevenで使用したこのInfoBubbleのカスタマイズバージョンをご覧いただけます。次のようになります。
ここにいくつかの例があります。ただし、スクリーンショットの例ほど見栄えはよくありません。
jqueryだけを使用してInfoWindow全体を変更できます...
var popup = new google.maps.InfoWindow({
content:'<p id="hook">Hello World!</p>'
});ここで、<p>要素は、実際のInfoWindowへのフックとして機能します。domreadyが起動すると、要素はアクティブになり、などのjavascript / jqueryを使用してアクセスできるようになり$('#hook').parent().parent().parent().parent()ます。
以下のコードは、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クラスの設定や、新しい要素の追加など、何でもできます。
要素をいじって、必要なものを取得してください...
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を含めます
バニラ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開発者ではないので、どんな考え、コメント、批判も歓迎します:)
以下のコードはあなたを助けるかもしれません。
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));これを実現するのに役立った記事< 完璧なズームでグーグルマップ上に複数の住所を見つける方法 >があります。動作するJS Fiddleリンクと完全な例については、それを参照してください。
FWIX.comが具体的にどのように実行しているかはわかりませんが、カスタムオーバーレイを使用しているのではないでしょうか。
以下のコードを使用して、スタイルのデフォルトの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
});これがグーグルの現在のinfowindowの例に基づく純粋な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
独自のcssクラスをポップアップコンテナー/キャンバスに追加することもできます。現在のGoogleマップ3.7には、コード内でポップアップdivコンテナーを付加するcanvas要素によってスタイル設定されたポップアップがあります。したがって、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には存在しないため、これを機能させる場合は、この手順に従ってください。
イベントなどの最新のInfoWindowリファレンスを確認してください。
私はこれがいくつかのケースで最もきれいであるとわかりました。
私が思いついた最良の答えはここにあると思います：https : //codepen.io/sentrathis96/pen/yJPZGx
私はこれを信用できません、実際にロードするようにgoogle mapsの依存関係を修正するために別のcodepenユーザーからこれをフォークしました
次の呼び出しを書き留めます。
InfoWindow() // constructor