地图标记的默认Google Maps InfoWindow非常圆。如何创建带有方形角的自定义InfoWindow？
Answers:
编辑经过一番摸索，这似乎是最好的选择：
https://github.com/googlemaps/js-info-bubble/blob/gh-pages/examples/example.html
您可以在Dive Seven（用于在线水肺潜水记录的网站）上看到此InfoBubble的自定义版本。看起来像这样：
有一些更多的例子在这里。但是，它们的外观肯定不如屏幕截图中的示例所示。
您可以单独使用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非常适合高级样式。
InfoBox的行为类似于google.maps.InfoWindow，但它支持其他几个用于高级样式设置的属性。信息框也可以用作地图标签。信息框还会触发与google.maps.InfoWindow相同的事件。
在页面中包含http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/infobox/src/infobox.js
使用香草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';
}
});该代码使用具有ID的div来照常创建信息窗口（无需插件，自定义叠加层或庞大的代码），以容纳内容。这为系统提供了一个挂钩，我们可以使用它来获取正确的元素，以使用简单的外部样式表进行操作。
还有一些额外的部分（并非严格需要），这些部分可以处理诸如将div插入其中包含关闭信息窗口图像的div的操作。
最后的循环隐藏了指针箭头的所有部分。我自己需要这个，因为我想在信息窗口中保持透明，而箭头却挡住了。当然，使用钩子，更改代码以将箭头图像替换为您选择的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));这是一篇文章< 如何使用完美缩放在Google地图上定位多个地址 >，帮助我实现了这一点。您可以参考它来使用JS Fiddle链接和完整示例。
我不确定FWIX.com的具体操作方式，但是我敢打赌他们正在使用自定义叠加层。
您可以使用下面的代码删除样式默认的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
});这是一个基于Google当前信息窗口示例的纯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
您甚至可以在弹出式容器/画布上添加自己的css类，或添加所需的样式。当前的Google Maps 3.7具有以canvas元素样式设置的弹出窗口，该弹出窗口在代码中添加了popup div容器。因此，在googlemaps 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';
}
}
});IE8-中不存在element.previousElementSibling，因此，如果要使其起作用，请按照以下步骤操作。
查看最新的InfoWindow参考以获取事件等信息。
我发现这在某些情况下最干净。
我认为我想出的最佳答案是： https //codepen.io/sentrathis96/pen/yJPZGx
我对此不以为然，我从另一个Codepen用户那里分叉来修复实际加载的Google Maps依赖项
记下以下呼叫：
InfoWindow() // constructor