GMaps V3 InfoWindow – 禁用closures“x”button

从我所看到的，在GMaps API的v2中，有一个InfoWindow对象的属性“button”，可以通过给定InfoWindow没有closuresbutton的方式来定义：

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

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

如果没有更好的解决scheme，jQuery的解决方法是可以接受的。

Answer 1

更新

在谷歌地图上显示一个<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> ，如何和何时 – 在这里，我只是分配一个点击处理程序到地图（创build后），并在地图中的鼠标位置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'; }); 

你从中得到的是，每当你点击的时候，info <div>都会在地图上跟随你。

• 你将需要更多的样式，所以它适合你的需要，例如，它“看起来像一个信息框”，但这应该很容易find，我不是图书馆员:)
• 也许后来的东西closures的信息，但你不想在第一个地方:)

---

原始答案

你不能 ！ 在当前的v3.13 InfoWindow选项中没有办法做到这一点。

解决方法是禁用包含X的图像：

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

但这绝不是可取的 ！

src="http://maps.gstatic.com/mapfiles/api-3http://img.dovov.commapcnt3.png就是infowindow 今天提到的内容。明天，或者在一个月或一年内，这个图像引用因为你可以看到，如果你寻找类似的“解决scheme”，就像这样 ，现在它们都被打破了，比如说这个努力没有意义。

我认为谷歌有一个非常好的逻辑“拒绝”按照隐藏closuresbutton的请求。 如果你不需要closuresbutton，那你还需要什么InfoWindow？ 当你最好在地图上显示一个<div> 。

Answer 2

你也可以通过CSS来做到这一点。

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

Answer 3

如果使用jquery只是添加这个

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

Answer 4

感谢Tushar，但你也需要把这个代码放在事件处理程序中

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

Answer 5

要延长路易斯·摩尔的回答，你也可以在删除closuresbutton之后居中文本：

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

没有集中：

使用居中：

Answer 6

我使用了Tushar Gaurav给出的答案，但扩大了一点…

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

这将删除infoText的文本在infoText ，然后重新接收文本，因为它是偏离中心后删除closuresbutton。

只要把这个添加到像我一样在这个页面上绊倒的其他人。

Answer 7

 closeBoxURL: "" 

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

例如，您可以使用这个CSS解决方法删除X和周围的可单击button：

 .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

我的解决scheme

  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

你可以使用这个。 这不会隐藏像变焦控制，平移控制等信息窗口准备好您可以使用这个的其他图像。

 google.maps.event.addListener(infoWindow, 'domready', function () { document.querySelector(".gm-style-iw").nextElementSibling.style.display = "none"; }); 

Answer 11

我无法得到$(".gm-style-iw").next("div").hide(); 即使在DOM被加载后调用代码也是可行的，因为被调用的代码和正在创build的信息窗口之间存在延迟。 我所做的是创build一个间隔，直到find信息窗口并移除“X”元素。 如果有更好的方法，请告诉我。

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

Answer 12

使用弓箭手方法，我需要做的

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

Answer 13

 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 14

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

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

Answer 15

检查它 – 这是一个closures类的div – 你可以用CSS来定位它，并将其设置为display: none;

Answer 16

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

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

Answer 17

您可以使用该选项

closeBoxURL : ""

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

来自Google文档

closeBoxURL | string | 表示closures框的图片的url。 注意：默认值是Google标准closures框的url。 如果不需要closures框，请将此属性设置为“”。

例

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