Tutorial: Embed a Google Fusion tables map, with a legend, to a WordPress post

For digital journalists creating interactive maps using Google Fusion tables, a common complaint that Google has not addressed is that the map does not come with an embedded legend. Here’s a simple workaround to add a customized legend to your map.

Alert: Google has updated Fusion Tables maps and legend is now a build-in feature. Check this tutorial for a step-by-step guide on how to create a demo interactive map (with legend).

Why is an embedded legend desirable?

For a Google Fusion tables map, Google automatically generates embedding codes for embedding the map in a web page or a blog post. However, the embedded map does not come with a legend. Take a look at the map below, where I plotted the median household income by county in New Jersey.

With a few mouse clicks, a visitor to this map can figure out that darker colors mean higher incomes; but it really helps if there’s a customized legend that provides a quick overview of the distribution of income brackets.

3 steps to embed a legend in map and in WordPress blog post

1. Embed the map into a web page with a legend
We will create a web page that contains both the map and the legend. With some online search, I found a ready-made template to do just that. The template, which contains the sample in this post, can be downloaded here.

You need to open the template in an HTML editor such as Dreamweaver or Notepad, and make some changes based on your need. If the HTML codes look formidable to you – the only part you need to tweak is a small portion of it:

For the sample in this post, here are the edits I made to this portion of the codes:

  • tableId: 4161507 is the id number of my Google Fusion tables map
  • locationColumn: ‘geometry’ is the column in my Google Fusion map that contains location information for the county boundary
  • legendTitle: ‘median household income’ is a title that I want show up at the top of the legend box
  • divide the income range into 6 buckets and pick a color shade for each bucket – you can choose to use any number of bucket by deleting/adding the part contained between the two curly brackets

2. publish the page to a web server

For this part, you need to have access to a domain or website where you can store the edited template. I published mine to www.mulinblog.com, my personal website, as a regular web page which contains only the map (with the legend). You can take a look of the published map page.

If all you need is a standalone webpage with the map/legend, the job is done. You can continue to make changes or add other contents to your published page as needed.

3. embed the published page into a blog post

If you need to embed the web page (with map/legend) into a blog post, you need to tweak some other simple codes. I wrote a separate post on how to embed any web page in a WordPress blog post.

If everything is done right, the Google Fusion tables map with legend should appear in a blog post looking similar to the one below:
Error: Embedded data could not be displayed.

Related posts:

About Mu Lin

Dr. Mu Lin is a digital journalism professional and educator in New Jersey, United States. Dr. Lin manages an online marketing company. He also manages MulinBlog Online J-School (www.mulinblog.com/mooc), a free online journalism training program, which offers courses such as Audio Slideshow Storytelling; Introduction to Social Media Marketing; Writing for the Web; Google Mapping for Communicators; Introduction to Data Visualization; Introduction to Web Metrics and Google Analytics.
This entry was posted in Data journalism. Bookmark the permalink.

9 Responses to Tutorial: Embed a Google Fusion tables map, with a legend, to a WordPress post

  1. Pingback: How to Create Your Own Maps « Stumbling Through the Future

  2. Brian Fanney says:

    Excellent post. I finally got my fusion table to embed with the help of your instructions. I’m trying to include the legend, but the link to the zip file no longer works. Any chance that could be fixed? This is the page I’m working on currently.


  3. mulinblog says:

    Thanks for the comment. The link was fixed. Are you going to try adding a legend to your map? I would suggest you use different shades of a same color – in its current form, the map confuses me a bit as to what the different colors stand for.

  4. Brian Fanney says:

    I am trying to add a legend to provide some explanation. I’m using blue and red to indicate Democrat and Republican and purple and pink to show lean-Democrat and lean-Republican precincts.

  5. Hi Mulinblog, any idea how to make the color overlays semi-transparent. I’m not too familiar with HTML coding. Thanks

  6. sse isin says:

    May I simply just say what a comfort tto find someone that really knows what they’re discuussing on the internet.

    You certainly understand how to bring a problem to light and make
    it important. A lot more people must look at this and
    understand thbis side off your story. I was surprised you aren’t more popular given tnat
    you surely have the gift.

  7. Rita Ariyo says:

    please how do i make the attributes i have added to a Placemark automatically pop-up once the people i have shared my link with open the web page. i know this thread is really old but i would really appreciate a solution from somebody, anybody

Leave a Reply