Google地图：如何创build自定义InfoWindow？
地图标记的默认Google地图信息窗口非常圆。 如何创build一个方形angular的自定义InfoWindow？
编辑经过一番狩猎后，这似乎是最好的select：
https://github.com/googlemaps/js-info-bubble/blob/gh-pages/examples/example.html
您可以看到我在Dive Seven（一个在线潜水logging网站）上使用的InfoBubble的定制版本。 它看起来像这样：
Google 提供了演示如何实现自定义信息窗口的演示 。 它需要相当数量的代码，但似乎很简单。
这里还有一些例子。 但是，它们绝对不像屏幕截图中的示例那么好看。
您可以单独使用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是高级造型的完美select。
InfoBox的行为类似于google.maps.InfoWindow ，但它支持高级样式的几个附加属性。 一个信息框也可以用作地图标签。 一个InfoBox也会触发与google.maps.InfoWindow相同的事件。
在您的页面中添加http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/infobox/src/infobox.js
然后使用这个例子： http : //google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/docs/examples.html
deviseinfowindow是相当简单的香草JavaScript。 写这个的时候我使用了这个线程的一些信息。 我还考虑到了早期版本的ie可能存在的问题（尽pipe我没有对它们进行testing）。
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'; } });
代码像平常一样创buildinfowindow（不需要插件，自定义覆盖或巨大代码），使用带有id的div来保存内容。 这给系统中的钩子，我们可以用一个简单的外部样式表来获取正确的元素来操作。
有一些额外的部分（这是不是很严格需要），处理事情就像给它一个closures信息窗口图像的股利钩。
最后一个循环隐藏了指针箭头的所有部分。 我自己需要这个，因为我想在infowindow上拥有透明度，箭头挡在了路上。 当然，使用钩子，改变代码来replace你select的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));
这里有一篇文章< 如何find完美缩放的谷歌地图上的多个地址 >帮助我实现了这一目标。 你可以参考它的工作JS小提琴链接和完整的例子。
我不确定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 });
这是一个纯粹的CSS解决scheme，基于谷歌当前的infowindow示例：
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; }
这是一个快速的解决scheme，适用于小型信息窗口。 如果有帮助，不要忘了投票
你甚至可以在popup的容器/canvas上附加你自己的css类，或者你想要什么。 目前的谷歌地图3.7popup式窗体元素，它代表popup式div容器的样式。 所以在谷歌地图3.7你可以通过popup的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
我不能赞扬这一点，我从另一个codepen用户分叉，以解决谷歌地图依赖实际加载
记下呼叫：
InfoWindow() // constructor
