javascript - 谷歌地图 API v3 : Custom styles for infowindow

Question

我已经尝试了谷歌地图引用和其他 stackoverflow 问题中的许多示例，但我无法在我的信息窗口上获得自定义样式。

我正在使用与所做的非常相似的东西 in this other stackoverflow answer

这是工作/可编辑的:http://jsfiddle.net/3VMPL/

特别是，我想要方 Angular 而不是圆 Angular 。

Answer 1

更新:引用this answer信息框源码迁移到github的状态。

---

使用 Infobox 插件而不是使用通常的 Infowindow 怎么样？我在 jsfiddle example here 中提供了一个完整的示例.关于信息框的主要内容是您可以在页面的 html 中创建您的信息框，让您可以使用 css(和一些 javascript 选项，如果需要)完全控制它的外观。这是信息框的 html:

<div class="infobox-wrapper">
    <div id="infobox1">
        Infobox is very easy to customize because, well, it's your code
    </div>
</div>

这里的想法是"infobox-wrapper" div 将被隐藏(即，display:none 在你的 css 中)然后在你的 javascript 中你将初始化一个 Infobox 对象并给它一个引用像这样到你的“信息框”(在隐藏的包装器内):

infobox = new InfoBox({
    content: document.getElementById("infobox1"),
    disableAutoPan: false,
    maxWidth: 150,
    pixelOffset: new google.maps.Size(-140, 0),
    zIndex: null,
    boxStyle: {
                background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
                opacity: 0.75,
                width: "280px"
        },
    closeBoxMargin: "12px 4px 2px 2px",
    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
    infoBoxClearance: new google.maps.Size(1, 1)
});

这只是一些可用选项的示例。唯一需要的键是 content - 对信息框的引用。

打开信息窗口:

google.maps.event.addListener(marker, 'click', function() {
    infobox.open(map, this);
    map.panTo(loc);
});

并进一步展示信息框的灵 active ，this jsfiddle有一个带有 css 转换的图像作为“信息框”。

最后一个提示:不要在您的 html 中使用类“信息框”。不幸的是，当信息框实际生成时，插件会使用它。