web-dev-qa-db-ja.com

GMaps V3 InfoWindow-閉じる「x」ボタンを無効にする

私が見るところ、GMaps API v2には、InfoWindowに閉じるボタンがないように定義できるInfoWindowオブジェクトのプロパティ「ボタン」がありました。

marker.openInfoWindowHtml("No Close Button",{buttons:{close:{show:4}}});

ただし、上記はv3には適用されません。誰かがそれを行う方法を知っていますか？ InfoBox と呼ばれるInfoWindowを置き換えるユーティリティについて読みましたが、過去2年間開発されていません。現在、Gmaps v3 APIの最新バージョン3.13を使用しています。

より良い解決策がない場合、jQueryの回避策は受け入れられます。

jquerygoogle-mapsgoogle-maps-api-3
40
ddinchev

更新

Googleマップの上に<div>を表示するのは簡単です。

例のCSS

div.info {
    position: absolute;
    z-index: 999;
    width: 200px;
    height: 100px;
    display: none;
    background-color: #fff;
    border: 3px solid #ebebeb;
    padding: 10px;
}

マークアップ内のどこかにあるinfoクラス<div>：

<div id="myinfo" class="info"><p>I am a div on top of a google map .. </p></div>

Divへの短い参照を持つことは常に素晴らしいです：

var info = document.getElementById('myinfo');

<div>、方法とタイミングを示すよりトリッキーな部分-ここではクリックハンドラーをマップに割り当て（作成後）、マップ内のマウス位置XYで情報<div>を表示します。

google.maps.event.addListener(map, 'click', function(args) {
  var x=args.pixel.x; //we clicked here
  var y=args.pixel.y;

  info.style.left=x+'px';
  info.style.top=y+'px';
  info.style.display='block';
});

これで得られることは、クリックするたびに、情報<div>が地図上を案内するということです。

enter image description here

  • あなたのニーズに合うように、もっとスタイリングが必要になります。例えば、「InfoBoxのように見える」のですが、それは簡単にわかるはずです。私は司書ではありません:)
  • そして多分後で情報を閉じるために何かで、しかしあなたがそもそも望んでいなかったこと:)

元の答え

カント！現在のv3.13 InfoWindowオプション では、これを行う方法はありません。

回避策は、Xを含むイメージを無効にすることです：

<style>
img[src="http://maps.gstatic.com/mapfiles/api-3/images/mapcnt3.png"] {
    display: none;
}
</style>

enter image description here

しかし、これはノーウェイアドバイスです！

src="http://maps.gstatic.com/mapfiles/api-3/images/mapcnt3.pngは、情報ウィンドウがtodayを参照しているものです。明日、1か月、1年で、この画像参照は確実に変更されました。 this のように、時間をかけて作成された同様の「解決策」を検索した場合にわかるように。それらは今日すべて壊れています。例えば、努力は無意味です。

グーグルの「拒否」には、閉じるボタンを非表示にするという要求に従う非常に良いロジックがあると思います。閉じるボタンが不要な場合、とにかくInfoWindowは何が必要ですか？ <div>を地図に表示するだけの方が良い場合。

19
davidkonrad

CSSを使用して行うこともできます。

.gm-style-iw + div {display: none;}

2019年1月編集
@ antmeehanがコメントで言ったように、

GoogleはHTMLを変更し、閉じるボタンはdivではなくボタン要素になりました

したがって、「x」ボタンを非表示にするCSSコードは次のとおりです。

.gm-style-iw + button {display: none;}
35
Louis Moore

jqueryを使用している場合はこれを追加するだけです

$(".gm-style-iw").next("div").hide();
16
Tushar Gaurav

Louis Mooreの答えを拡張するには、閉じるボタンを削除した後にテキストを中央に配置することもできます。

.gm-style-iw + div {display: none;}
.gm-style-iw {text-align:center;}

センタリングなし：

センタリングあり：

14
phi

Tusharに感謝しますが、このコードをイベントハンドラーに入れる必要もあります

google.maps.event.addListener(infowindow, 'domready', function(){
    $(".gm-style-iw").next("div").hide();
});
12
CarryLight

Tushar Gauravの回答を使用しましたが、少し拡大しました...

$(".gm-style-iw:contains(" + infoText + ")").css("left", function() {
    return ($(this).parent().width() - $(this).width()) / 2;
}).next("div").remove();

これは、infoTextにテキストがある情報ウィンドウからXを削除し、閉じるボタンを削除した後、テキストを中心から外れた位置に再配置します。

私がやったようにこのページを偶然見つけた他の人にこれを追加するだけです。

7
Archer
closeBoxURL: ""

前述のとおり、 InfoWIndow には適用されません。これは InfoBox のオプションです。

たとえば、このCSSの回避策を使用して、Xおよび周囲のクリック可能なボタンを削除できます。

.gm-style-iw + div {
  display: none;
}

そしてdavidkonradが言ったように。これは、現在のコードの回避策です。変更される可能性があります。

6
tmn

私自身の方法（Jqueryなし）およびinfoWindowの中心への再配置：

var content = document.querySelector('.gm-style-iw');
content.parentNode.removeChild(content.nextElementSibling);
content.style.setProperty('width', 'auto', 'important');
content.style.setProperty('right', content.style.left, 'important');
content.style.setProperty('text-align', 'center', 'important');
4
alex

私の解決策：

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

            var wnd = new google.maps.InfoWindow({
                content: "<table id='viewObject' >...</table>"
            });

            google.maps.event.addListener(wnd, 'domready', function(){

                $("#viewObject").parent().parent().next().remove();
            });

            wnd.open(map, marker);
        });
2
nim

これを使用できます。これは、ズームコントロール、パンコントロールなど、他の画像を非表示にすることはできません。

google.maps.event.addListener(infoWindow, 'domready', function () {

      document.querySelector(".gm-style-iw").nextElementSibling.style.display = "none";
});
1
Bipool

.gm-style-iw +ボタン{display：none！important;}

1
user3760553

これは動作します

.gm-style-iw > button {display: none !important;}
0
Ryan Irilli
=============  HTML  ==============
<agm-map #gm [latitude]="lat" [longitude]="lng" #AgmMap [fitBounds]="true">
 <agm-marker
          (mouseOver)="onMouseOver(infoWindow, gm)"
          (mouseOut)="onMouseOut(infoWindow, gm)"
        >

         <div id="test">
            <agm-info-window #infoWindow></agm-info-window>
          </div>
        </agm-marker>
      </agm-map>

=============  TS  ==============

onMouseOver(infoWindow, gm) {
console.log(infoWindow);
if (gm.lastOpen != null) {
 gm.lastOpen.close();
}
gm.lastOpen = infoWindow;
infoWindow.open();
setTimeout(() => {
  var x = document.getElementsByClassName('gm-ui-hover-effect')[0].remove();
}, 10);
}
onMouseOut(infoWindow, gm) {
gm.lastOpen = infoWindow;
// infoWindow.close();

}

0
Omar Hasan

アーチャーの方法を使用して私がする必要がある

$(".gm-style-iw").css("left", function() { //remove close and recenter
  return ($(this).parent().width() - $(this).find(">:first-child").width()) / 2;
}).next("div").remove();
0
zevero

ここで正しい答えが見つからないので、自分で修正しました。それはうまくいくでしょう。

google.maps.event.addListener(infowindow, 'domready', function(){
      $(".gm-style-iw").parent().find("button").removeAttr("style").hide();
});
0
Michael Lee

そのはず .gm-style-iw > buttonボックス内に非表示にする他のカスタムボタンを避けるために：

.gm-style-iw > button {
  display: none !important;
}
0
rob.m
google.maps.event.addListener(infowindow, 'domready', function() {

    var iwOuter = jQuery('.gm-style-iw');

    // Reference to the div that groups the close button elements.
    var iwCloseBtn = iwOuter.next();

    // Apply the desired effect to the close button
    iwCloseBtn.remove()
});

APIパラメータでこれを非表示にするオプションはないため、コンテンツウィンドウをターゲットにして要素を見つけて削除する必要があります。

お役に立てれば ：）

0
dipak_pusti

呼び出されるコードと作成される情報ウィンドウの間に遅延があったため、DOMがロードされた後にコードを呼び出しても、$(".gm-style-iw").next("div").hide();応答を取得できませんでした。私がやったのは、情報ウィンドウを見つけて「X」要素を削除するまで実行する間隔を作成することでした。もっと良い方法があれば教えてください。

var removeCloseButton = setInterval(
    function()
    {
        if ($(".gm-style-iw").length)
        {
            $(".gm-style-iw").next("div").remove();
            clearInterval(removeCloseButton);
        }
    },
    10
);
0
Gavin