Question

从我看到的，在GMaps的v2中，有一个属性＆＃34;按钮＆＃34; InfoWindow对象，可以给定InfoWindow没有关闭按钮的方式定义：

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

但上述内容不适用于v3。有人知道这样做的方法吗？我读到了一个替代名为InfoBox的InfoWindow的实用工具，但它在过去的两年里还没有开发出来。我目前正在使用最新的3.13版本的Gmaps v3 API。

如果没有更好的解决方案，可以使用jQuery的解决方法。

Answer 1

您也可以通过CSS进行。

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

编辑2019年1月
正如@antmeehan在评论中所说，

Google更改了HTML，关闭按钮现在是一个按钮元素而不是div

现在隐藏“x”按钮的css代码现在是：

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

Answer 2

更新

在谷歌地图上显示<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 options中无法做到这一点。

解决方法是禁用包含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正是infowindow所指的今天。明天，或在一个月或一年内，这个图像参考肯定已经改变。正如您所看到的那样，如果您搜索类似的“解决方案”，那就是随着时间的推移 - 就像this一样。它们今天都被打破了，例如努力毫无意义。

我认为谷歌“拒绝”遵循隐藏关闭按钮的请求有非常好的逻辑。如果您不需要关闭按钮，那么您还需要InfoWindow？如果您最好只是在地图上显示<div>。

Answer 3

如果使用jquery只需添加此

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

Answer 4

要扩展 Louis Moore 的答案，您还可以在删除关闭按钮后将文本居中：

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

没有居中：

使用居中：

Answer 5

谢谢Tushar，但您还需要将此代码放在事件处理程序中

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

Answer 6

我使用了Tushar Gaurav给出的答案，但稍稍扩展了一下......

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

这将使用infoText中的文本从infowindow中删除X，然后在删除关闭按钮后重新显示文本，因为它偏离中心。

只需像其他人那样偶然发现这一点。

Answer 7

closeBoxURL: ""

如前所述，不适用于InfoWIndow。这是InfoBox上的一个选项。

例如，您可以使用此CSS解决方法删除X和周围的可点击按钮：

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

正如 davidkonrad 所说。这是代码的解决方法，就像现在一样。它可能会改变。

Answer 8

我自己的方式（没有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');

Answer 9

我的解决方案：

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

Answer 10

你可以用它。这不会隐藏其他图像，如变焦控制，平移控制等。在dom ready of info window上你可以使用它。

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

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

Answer 11

应该为.gm-style-iw > button，以避免我们可能也隐藏在框中的其他自定义按钮：

.gm-style-iw > button {
  display: none !important;
}

Answer 12

.gm-style-iw +按钮{display：none！important;}

Answer 13

Anno domini 2021 这对我来说效果更好

button.gm-ui-hover-effect {
  display: none !important;
}

Answer 14

即使在加载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
);

Answer 15

=============  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();

}

Answer 16

这有效

.gm-style-iw > button {display: none !important;}

Answer 17

我在这里找不到正确的答案，所以我自己修复了它。会很好用的。

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

Answer 18

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参数隐藏此选项，您必须通过定位内容窗口找到该元素并将其删除。

希望这会有所帮助：）

Answer 19

使用Archers方法我需要做

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

Answer 20

在jQuery的gmap3插件中，可以使用

完成

google.maps.event.addListener($('#map').gmap3({get:{name:"infowindow"}}), 'domready', function(){
    $(".gm-style-iw").next("div").remove();
});

Answer 21

2021 年 5 月：在您的 CSS 中添加：

button.gm-ui-hover-effect {
   visibility: hidden;
}

这与 Maps API v3.43 完美配合

Answer 22

检查它 - 它是一个关闭它的类的div - 你可以用CSS定位并将其设置为display: none;

Answer 23

您可以使用选项

closeBoxURL : ""

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html

来自Google文档

closeBoxURL | string |代表关闭框的图片的网址。注意：默认值是Google标准关闭框的网址。组如果不需要关闭框，则此属性为“”。

实施例

   var infowindow = new google.maps.InfoWindow({
                          closeBoxURL: "",
                          closeBoxMargin : ""

                        });

Answer 24

您可以将信息窗口的“closeBoxURL”属性设置为“”，它将使按钮消失。

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

GMaps V3 InfoWindow - 禁用关闭“x”按钮

24 个答案:

更新

原始答案

但这是没有办法可建议的！