5/13/2016
Tableau Solution - Embedding Google Maps in Tableau
This post offers a solution for the error message in Tableau Desktop when embedding Google maps. The error that shows is "The Google Maps Embed API must be used in an iframe". Embedded web pages and URL actions in Tableau are really powerful tools. As an example, I've been embedding Google Maps in Tableau for a really long time, both for Tableau Public work as well as in my corporate environment. In fact, one of my first Tableau Public visualizations was visualizing Crime in Cincinnati, which I submitted to the very first Tableau IronViz contest back in 2011 and later updated in 2013. This viz featured an interactive crime map using Google Maps.
I received a number of emails about it, specifically the mapping functionality and so I posted the instructions on how to build it here. This Crime Dashboard defaults to a map of Cincinnati, but when a user clicks on one of the crimes it shows the specific location on the map . It also utilizes a map swapper. The user can select Street View or Satellite View. If Google Street View is available then the user can navigate the area in Street View right inside the Tableau viz.
This is pretty simple to do. It just requires the latitude and longitude plugged into the right URL. Here are two examples for you.
Google Maps Satellite View
http://maps.google.com/maps?q=@39.152346,-84.500433&ll=39.152346,-84.500433&spn=.0005,.0005&t=h&hl=en&output=embed
Google Maps Street View
https://maps.google.com/maps?q=39.128976,-84.432831&layer=c&z=17&sll=39.128976,-84.432831&cbp=13,276.3,0,0,0&cbll=39.128976,-84.432831&hl=en&output=svembed
In the URL above latitude = 39.128976 and longitude = -84.432831. These can be substituted with the fields in Tableau for latitude and longitude and used to make the map dynamic.
However, if you copy the links above in your browser then you will get an error, "The Google Maps Embed API must be used in an iframe." This is the same error that you see if you put this link into Tableau Desktop as a Web Page object on a dashboard.
If you publish the visualization to Tableau Public or Tableau Server then it will work fine (for example the Crime Visualization above), but the map will NOT display in Tableau Desktop. This is a known problem and there is a Tableau Community thread here describing some solutions that a number of different people have tried for solving this issue.
I was working with someone yesterday who having this same issue. I had already formulated a solution in my head that I thought might work, so I decided to try to hack something together. In a nutshell, I created my own web page where a Google Maps URL (or any other URL) is appended as a parameter. Then it passes that URL into an iframe which is written to HTML and displayed as a web page. This allows the map to show up in every Tableau platforms; Desktop, Server, Public or Online. Note - it does require the browser to run JavaScript.
If you would like to try this yourself, it's pretty straight forward. It's just 2 lines of code on a hosted web page.
If you don't want to bother with HTML programming and just want a simple solution, then you are welcome to use my hosted page.
Simply add this link in front of the Google Maps URL in Tableau and you should be all set.
https://www.dataplusscience.com/iframe.html?url=
