Google Maps API v3:infowindow的自定义样式

Question

我已经尝试了谷歌地图参考和其他stackoverflow问题中的许多例子,但我无法在我的信息窗口获得自定义样式.

我使用的东西与其他stackoverflow答案中的内容非常相似

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

特别是,我想要方角而不是圆角.

Answer 1

更新:请参阅此答案,了解信息框源代码迁移到github的状态.

如何使用Infobox插件而不是使用通常的Infowindow？我在这里的jsfiddle示例中提出了一个完整的例子.关于信息框的主要内容是你可以在你的页面的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将被隐藏(即,显示:你的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);
});

为了进一步展示InfoBox的灵活性,这个jsfiddle有一个带有css过渡的图像作为"信息框".

最后一个提示:不要在你的HTML中使用"信息框"类. 不幸的是,当实际生成信息框时,插件使用它.

Answer 2

如果你不能使用信息框并需要自定义信息窗口,你可以使用css访问它.它并不漂亮,主要依赖于第一个:child/last:child psuedo选择器,显然是谷歌是否决定改变他们的地图html结构.

希望下面的CSS可以帮助其他人在被迫处理信息时遇到困难.

/* white background and box outline */
.gm-style > div:first-child > div + div > div:last-child > div > div:first-child > div
{
    /* we have to use !important because we are overwritng inline styles */
    background-color: transparent !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
}

/* arrow colour */
.gm-style > div:first-child > div + div > div:last-child > div > div:first-child > div > div > div
{
    background-color: #003366 !important; 
}

/* close button */
.gm-style > div:first-child > div + div > div:last-child > div > div:last-child
{
    margin-right: 5px;
    margin-top: 5px;
}

/* image icon inside close button */
.gm-style > div:first-child > div + div > div:last-child > div > div:last-child > img
{
    display: none;
}

/* positioning of infowindow */
.gm-style-iw
{
    top: 22px !important;
    left: 22px !important;
}