Google地图：如何创建自定义InfoWindow？

Question

地图标记的默认Google地图InfoWindow非常圆。我如何创建一个带方形角的自定义InfoWindow？

Answer 1

我不确定FWIX.com是如何专门做的，但我敢打赌他们正在使用Custom Overlays。

Answer 2

编辑一些狩猎周围后，这似乎是最好的选择：

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

你可以看到这个InfoBubble我对Dive Seven, a website for online scuba dive logging使用的定制版本。它看起来像这样：

---

谷歌provide a demo，说明如何实现自定义信息窗口。它需要相当数量的代码，但似乎非常简单。

---

还有一些例子here。不过，它们绝对不像屏幕截图中的示例那么好看。

Answer 3

我发现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在你的页面

Answer 4

你甚至可以附加在弹出的容器/画布上自己的CSS类或你想怎样。 当前谷歌地图3.7弹出窗口样式的元素，它代表弹出div容器的代码。 因此，在谷歌地图3.7，您可以进入通过弹出的domready中事件这样的渲染过程：所以如果你想让它在它的工作，follow this

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-。

check the latest InfoWindow reference事件以及更多......

我发现在某些情况下，最干净的。

Answer 5

可以修改使用jQuery独自整个信息窗口...

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

这里<p>元素将作为一个钩到实际的信息窗口。一旦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类或者只是添加一个新的元素。

与元素玩得到你所需要的...

Answer 6

样式化的信息窗口与香草的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'; 
    } 
}); 

的代码创建信息窗口照常（无需插件，自定义叠加或巨大的代码），使用一个div一个id持有的内容。这为系统提供了一个钩子，我们可以使用这个钩子来获取正确的元素来使用简单的外部样式表进行操作。

有一些额外的部分（并不是严格需要的），它们处理的事情就像给它一个关闭信息窗口图像的div钩。

最后一个循环隐藏指针箭头的所有部分。我自己需要这个，因为我想让infowindow具有透明度，并且箭头挡在了路上。当然，使用钩子，更改代码以用你选择的PNG替换箭头图像应该也相当简单。

如果你想改变它为jquery（不知道为什么你会），那应该是相当简单的。

我通常不是一个JavaScript开发，因此任何想法，意见，批评欢迎:)

Answer 7

下面的代码可以帮助你。

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

这里是一个文章< How to locate multiple addresses on google maps with perfect zoom>，帮助我实现了这一点。你可以参考它的工作JS小提琴链接和完整的例子。

Answer 8

您可以使用下面的代码删除样式默认的inforwindow。后，您可以使用HTML代码inforwindow：

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

Answer 9

这是基于当前的信息窗口例如在谷歌一个纯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

Answer 10

我认为最好的答案，我想出来的是在这里： https://codepen.io/sentrathis96/pen/yJPZGx

我不能把信贷对于这一点，我分叉从另一个codepen用户修复谷歌地图的依赖，以实际加载的通话

请记到：

InfoWindow() // constructor