Tutorials‎ > ‎

1. Embed an Intensity Map on Blogger

If product changes have made the details on this page incorrect, please tell us at: googletables-feedback@google.com.

Related Demo script
Demo: Embed an Intensity Map on Blogger

Example of completed exercise

Topics covered
  • Public data
  • Make a fusion table
  • Intensity Map visualization
  • Embed a visualization (Blogger used as an example)

  • Have a Google account
  • Have a Blog on Blogger

Sign in to Google Fusion Tables

  1. Go to http://tables.googlelabs.com in your browser
  2. Optional: click through the Tour
  3. Sign in with your Google Account
    1. Need a Google Account? you can make one with any e-mail address by adding a password to it.
    2. Click the "Create a Google Account" link on the sign in page.  
  4. You should now see a list of tables

Find public data 

  1. Click "Public tables" to see data tables that Google Fusion Tables users have selected to make public. 
  2. Search to find the table called "Total renewable Freshwater Supply"
  3. Click to open it.
  4. Optional: explore the attribution for the table under File > About

Create Intensity Map

  1. Click Visualize > Intensity map. Fusion Tables detects data types automatically.
    1. Optional: confirm the "Location" is "Country"
    2. Optional: confirm the "Value" is "Annual Renewable Water Resources"

Create a New Post in Blogger

  1. Go to http://www.blogger.com or http://<yourblogname>.blogspot.com in a new tab or new window.
  2. Sign in to your blog
  3. Click the "New Post" link in the upper bar
  4. Give the blog post a name (eg: "Map of Renewable Water")

Embed the Intensity Map

  1. In the new blog post, click "Edit HTML" to ensure you're in the scripting view
  2. On the Intensity Map page, click "Get embeddable code"
  3. Select all text in the text box that opens 
    1. Tip: triple-click in the box, or click and type Control-A to Select All
  4. Copy to the clipboard
  5. Switch to the blog post, and paste into the post's text box. 
  6. Optional: Add text before or after the map. Just avoid the content between the <script> tags. 
  7. Click "Publish" to save and publish the post
  8. Click "View Post" link to see the result

Adjust default width in Blogger

The Intensity Map and other visualizations from Google Fusion Tables are wider than the default width of Blogger. To prevent Blogger from cutting them off on the right, change the default width of Blogger posts. 
  1. Go into the "Layout" tab
  2. Click "Edit HTML" 
  3. Download a copy of your current template just for back-up. 
  4. Find the editable text box. 
  5. Scroll through the content until you see "Outer Wrapper"
  6. Under "#outer-wrapper" change "width: 660px" to "width: 1000px"
  7. Under "#main-wrapper" change "width: 410px" to "width: 750px"
    1. Tip: if the numbers aren't precisely 660px and 410px to start with, don't worry. 
  8. Click "Save Template" and view your blog post again.