How to Embed a Google Map in Tableau

UPDATE, May 2015: Google is constantly changing their Maps service. Nelson Davis has a recent blog post that addresses issues with the method outlined here, which doesn’t work quite like it used to. 😉

(For this post, I owe a word of thanks to Andrew Beers – VP of Product Development at Tableau, for the raw data, and Mike Klaczynski – Data Analyst on the Tableau Public team, for showing me this method).

At the Seattle Hacks/Hackers event last night, we built an interactive data dashboard that allows the reader to explore bridges in the state of Washington, where a bridge crossing the Skagit River recently collapsed into the water after being struck by a truck carrying an oversize load.

What’s notable about this dashboard is that you can click on any of the 2,489 circles on the map and bring up an embedded Google satellite image of the bridge within the dashboard itself. I didn’t have to take a screen shot of each satellite image – that would be way too much fun. Instead, I used a little-known feature in Tableau Public – embedded web pages (similar to the Embedding YouTube post from a few weeks ago).

How to embed a Google satellite image in a Tableau Public visualization:

The first group of 5 steps shows you how to create a url for each bridge, and the second group of 5 steps shows you how to add a box to your dashboard to pull up the bridges.

I. Create the URLs
1. First, notice that the data file contains Latitude (“LAT”) & Longitude (“LON”) for each bridge.

2. A Google Maps search for a particular Latitude & Longitude (say, 48.445781 and -122.341108) yields a link url like this:
https://maps.google.com/maps?q=48.445781,-122.341108&hl=en&sll=48.445781,-122.341108&sspn=0.009949,0.026157&t=h&z=16

3. The url can be simplified a little bit as follows:
https://maps.google.com/maps?q=48.445781,-122.341108&z=17&t=h&output=svembed

4. Breaking down the elements of the url, we can see that after the latitude & longitude, there are three parameters in the url:

• “q=48.445781,-122.341108” – these are your coordinates. Note that if you have an address field instead of Lat/Long, you can put an address after “q=” as well
• &z=17 – this specifies the zoom level. Higher numbers zoom in, lower numbers zoom out
• &t=h – this specifies the type of map. (t=m is a map, t=h is a satellite view)
• &output=svembed – this is a key parameter that makes sure the website you embed in your viz doesn’t include the entire site – just the map itself

5.  You could then generalize the url to:

•  https://maps.google.com/maps?q=<LAT>,+<LON>&z=17&t=h&output=svembed

You can see that the actual numbers for Latitude and Longitude have been replaced with field names <LAT> and <LON>

The next group of steps walks you through how to add a box to your dashboard that pulls up this embedded satellite image when a user clicks on a particular circle.

II. Add dynamic Satellite Images to your Dashboard

1. First, in the dashboard tab, drag a Web Page onto your dashboard from the left-center panel (just leave the “Edit URL” dialog box blank and click “OK” for now):

2. From the Dashboard file menu, click Actions and click the “Add Action >” button and choose “URL…”

3. In the Add URL Action dialog box, select whatever sheet you have created that includes the fields LAT and LON, and choose what event you’d like to trigger navigation to the new image (Hover, Select, or Menu). In this case, I’ve selected Map as my Source Sheet and Select as my trigger event, but you could trigger the action from a table or other type of sheet. Here’s what the dialog box looks like:

4. Now comes the magic. Copy and paste the generalized url above to the URL field of the dialog box, and replace <LAT> and <LON> with the corresponding field names in your data source by clicking the small arrow to the right of the URL text entry field:

5. That’s it! Test it out by clicking on the map circles and see the satellite image change accordingly.

I can see this being useful for organizations that would like to include images of office locations or real estate assets in their dashboards. For data journalists, it’s about allowing readers to interact with the abstract and the real in the same graphic.

If you make a dashboard with a dynamic Google map, be sure to post the link in the comments field for all to see.

Added 6/10: Here are the slides from the event:

Ben