Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Wordpress wraps the content of your post in a <code>&lt;div class="entry"&gt;</code> 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:</p> <pre><code>.entry img { padding: 4px; border: 1px solid #dddddd; background-color: #FFFFFF; } </code></pre> <p>Specifically, the <code>background-color</code> 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:</p> <pre><code>.map img { background-color: transparent; } </code></pre> <p>And then wrap your javascript in a <code>&lt;div class="map"&gt;</code> block, like so:</p> <pre><code>&lt;div class="map"&gt; &lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"&gt;&lt;/script&gt; &lt;div id="gmap" style="width:590px; padding-top:40px;height: 550px;"&gt; &lt;script type="text/javascript"&gt; 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); &lt;/script&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload