Some tips to add Fusion Tables maps to Blogger posts

Published 2012-08-15

Daniel Montenegro offers some tips on using the Google Maps and Fusion Tables javascript API within Blogger using the following code snippet from Google’s Kathryn Hurley and the AP’s Michelle Minkoff.

<Module>
    <ModulePrefs title="Fusion Tables" title_url="http://www.google.com/fusiontables" description="Fusion Tables" width="520" height="450">
    </ModulePrefs>
    <Content type="html">
    {{ YOUR JAVASCRIPT CODE HERE. INCLUDE CALL TO MAPS API }}
    </Content>
    </Module>

But using that code to “wrap” your javascript for Blogger is just the beginning. Montenegro writes:

If you try to post your FT map with just this first part, you’ll have as result a map-canvas with no image at all, and only your [Fusion Tables] layers will be appearing. That’s because Blogger’s default configuration is “blank covering” the map-canvas.

The remedy is similar to a method that Wordpress users might have used when creating Fusion Tables maps: adding a CSS class to give a div a transparent background

.map img {backgroud-color: transparent;}

We can then wrap our map in a div using this class.

You can view sample of the complete code here. And as always, pass along any ideas on how to optmize it.