Wordpress将您帖子的内容封装在< div class =entry> 块中，您的主题用于提供正确的样式。由于准备显示Google地图的JavaScript会返回图像，因此该公报样式表的相关部分为：

  .entry img {
 padding：4px; 
 border：1px solid #dddddd; 
背景颜色：#FFFFFF; 



 $ b特别是， background-color 设置会导致覆盖的Fusion Tables图层以不透明背景绘制，然后隐藏底层图。您需要在您的样式表中定义一个新类（让我们称之为地图），以透明背景绘制图像： 

  .map img {
 background-color：transparent; 
} 
 
然后将您的javascript包装在< div class =map>  block，如下所示： 


 < div class =map &GT; 
< script type =text / javascriptsrc =http://maps.googleapis.com/maps/api/js?sensor=false>< / script> 
< div id =gmapstyle =width：590px; padding-top：40px; height：550px;> 
< script type =text / javascript> 
 var fracmap = new google.maps.Map（document.getElementById（'gmap'），
 center：new google.maps.LatLng（44.797709533120106，-90.43712582444374），
 zoom：7， 
 mapTypeId：'hybrid'
}）; 
 var layer0 = new google.maps.FusionTablesLayer（{
 query：{
 select：'geometry'，
 from：2695847 
}，
} ）; 
 layer0.setMap（fracmap）; 
 var layer1 = new google.maps.FusionTablesLayer（{
 query：{
 select：'geometry'，
 from：2695779 
}，
} ）; 
 layer1.setMap（fracmap）; 
< / script> 
< / div> 
< / div> 
 
 

I'd like to display a Google Map overlaid with two Fusion Tables layers. The code below works perfectly if I just copy it into a text editor, save the file as map.html, and open it in my browser. But when I put it in a post on my WordPress-themed site, the underlying map is hidden by the Fusion Tables layers. Those layers aren't totally opaque: I can see both of them at the same time. I just cannot see the underlying map.

Whenever I zoom or pan the map, the underlying map appears briefly before the Fusion Tables layers are drawn over it. I suspect that there is a style setting at fault. Do you know how to get the map to display properly?

I'm using WordPress version 3.0.4 with the Gazette theme by woothemes; the site is http://www.wisconsinwatch.org.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
 
<div id="gmap" style="width:590px; padding-top:40px;height: 550px;">
    <script type="text/javascript">
        var fracmap = new google.maps.Map(document.getElementById('gmap'), {
            center: new google.maps.LatLng(44.797709533120106, -90.43712582444374),
            zoom: 7,
            mapTypeId: 'hybrid'
        });
        var layer0 = new google.maps.FusionTablesLayer({
            query: {
                select: 'geometry',
                from: 2695847
            },
        });
        layer0.setMap(fracmap);
        var layer1 = new google.maps.FusionTablesLayer({
            query: {
                select: 'geometry',
                from: 2695779
            },
        });
        layer1.setMap(fracmap);
    </script>
</div>

Thanks!

Wordpress wraps the content of your post in a <div class="entry"> block, which your theme uses to provide the proper styling. Since the javascript that prepares the Google map for display returns an image, the relevant part of the Gazette style sheet is:
.entry img {
    padding: 4px;
    border: 1px solid #dddddd;
    background-color: #FFFFFF;
    }

Specifically, the background-color setting causes the overlaid Fusion Tables layers to be drawn with an opaque background, which then hides the underlying map. You need to define a new class in your style sheet (let's call it "map") that draws images with a transparent background:
.map img {
    background-color: transparent;
    }

And then wrap your javascript in a <div class="map"> block, like so:
<div class="map">               
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <div id="gmap" style="width:590px; padding-top:40px;height: 550px;">
    <script type="text/javascript">
    var fracmap = new google.maps.Map(document.getElementById('gmap'), 
        center: new google.maps.LatLng(44.797709533120106, -90.43712582444374),
            zoom: 7,
            mapTypeId: 'hybrid'
            });
            var layer0 = new google.maps.FusionTablesLayer({
                query: {
                select: 'geometry',
                from: 2695847
            },
        });
        layer0.setMap(fracmap);
        var layer1 = new google.maps.FusionTablesLayer({
            query: {
                select: 'geometry',
                from: 2695779
            },
        });
        layer1.setMap(fracmap);
    </script>
    </div>
</div>