Google地图气泡中的CSS格式如何运作？

Question

我正在使用KML和GGeoXml对象在嵌入式Google地图上叠加一些形状.KML文件中的地标具有一些显示在气球中的自定义描述性信息.

<Placemark>
    <name />
    <description>
        <![CDATA[
            <div class="MapPopup">
                <h6>Concession</h6>
                <h4>~Name~</h4>
                <p>Description goes here</p>
                <a class="Button GoRight FloatRight" href="#"><span></span>View details</a>
            </div>
        ]]>
    </description>
    <styleUrl>#masterPolyStyle</styleUrl>
    ...Placemarks go here ...
</Placemark>

到目前为止一切都那么好 - 弹出窗口出现并在其中包含正确的文本.这是奇怪的事情:我正在尝试使用CSS格式化弹出窗口中的内容,并且它中途运行.

特别:

• 在<h6>和<h4>元素使用我在我的样式表中指定的颜色和背景图片呈现.
• 一切都显示在Arial中,而不是我在CSS中指定的字体.

• 似乎忽略了类名(例如,没有a.Button应用任何格式;如果我定义类似下面的样式,则忽略它.)

  div.MapPopup { background:pink; }
  

有任何想法吗？我不会对CSS根本不工作感到惊讶,但奇怪的是它只能部分工作.

更新

这是一个截图,以更好地说明这一点.我已经<div class="MapPopup">在页面上进一步向下再现了标记(黄色),以显示它应该如何根据我的CSS呈现.

Answer 1

正如我所说,我已经和Firebug一起看看发生了什么.看起来Google正在做两件令人讨厌的事情:

1. 它正在从我的HTML中删除所有类属性.
2. 它正在抛出各种硬编码风格.

这是我的HTML以及Google插入的前几个包装器:

<div style="font-family: Arial,sans-serif; font-size: small;">
    <div id="iw_kml">
        <div>
            <h6>Concession</h6>
            <h4>BOIS KASSA 1108000 (Mobola-Mbondo)</h4>
            <p>
                Description goes here</p>
            <a target="_blank"><span />View details </a>
        </div>
    </div>
</div>

正如你所看到的,我的课(例如,MapPopup在我的第一个div,Button等的<a>标签)都被剥夺了.

了解这一点,我将能够解决谷歌的干扰,使用!important和定位div整个地图的容器- 仍然,这很烦人,谷歌出乎意料地笨拙.