FusionTablesLayer hides the underlying map on a WordPress page - wordpress

Question

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!

Answer 1

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>