Why Vizioneer?

My photo
Atlanta, Georgia, United States
The "Vizioneer" comes from mashing two words that have shaped my world for most of my adult life - Engineer and [data] Visualizations (or Vizes to those who know what's up). Graduating from first from Oglethorpe University in Atlanta, followed by Georgia Tech with my Bachelors and Masters in Civil Engineering, all of which taught me to think through anything and everything - problem solving, "engineering" solutions, teaching to the "ah ha" moments - is what I love to do. In 2010 that investigative, engineering mindset intersected a job change and a plunge into the world of Data Analysis. In the search for the next great thing I stumbled on to a data visualization and dashboarding product called Tableau software and things just took off. So now I guess you could call me that engineer with the sweet data visualizations - or just "The Vizioneer" :)

In 2013, I joined the incredible team at Slalom, focusing on Tableau and it's been an amazing experience. Recently in 2014, I was honored and humbled to receive Tableau's highest recognition of being named a Tableau Zen Master. Follow along to see what happens next :)

Sunday, August 17, 2014

Tableau and Google Maps - Finally friends again!

How to integrate the Google Maps APIs with Tableau


Oh mapping, how I love thee. Some of you may know that in a previous life (like less than a year ago) I lived in a transportation world.  A transportation civil engineer by trade, all my analysis was about maps, points and asset management all over the beautiful city of Atlanta.  One of the coolest things that I ever did was to figure out how to create a magical URL that allowed me to feed a latitude and longitude into a Tableau web page and have a fully interactive Google Street View window showing me what was going on at that location.  It was my first really big Tableau hack and when I showed it as part of my potential presentation for TCC 2013 the people that saw it at Tableau had never seen it before (which is probably why I got to speak last year in Washington, DC).  Back then it was a fairly simple and elegant trick, you just needed to have the magical URL and it would work basically just like the example you see below:



The problem is if you want to recreate this functionality and you start by downloading the above Tableau Public workbook you open it up and immediately see some ugliness: 




So what happened?  The "New" Google Maps happened, that's what.  It's here and it's breaking all the cool stuff that tons of cool people put together.  Here's what happens when you download the Google Maps example from Ben Jones (one of the be known examples of this integration).  It goes from this:




to this:






So what can we do?

This saddened me.  The lowest moment of my sadness happened the night of April 8, 2014 - as I attempted to show how to integrate Google Street View into Tableau for the day 9 (birthday edition) of the Tableau 30 for 30 (it WAS my favorite trick!)  That night I fought with Google for over 2 hours trying to make this work.  I had to switch to Bing maps before I could declare any kind of victory, but it just wasn't the same.  While the "New" Google Maps made it seem impossible, I had the feeling that if I could employ a different skill set and leverage the Google Maps APIs the situation could be made whole again.

This past week I finally had an occasion to dig back into this problem.  And I'm happy to announce that I have returned a victorious man - Google Street View is ours once again!  I have to warn you, it's not as simple as it once was, but if you are bold (and knowing someone who does JavaScript doesn't hurt) this solution can once again make you the coolest kid on the block.  There's two levels of making this work - a fairly basic way that allows you to have this work on a local machine and a more advanced method that allows this to work on any machine.  I'll walk you through both, at least sorta :)

How does it work?

In general terms, here's what we're going to do - we're going to use Tableau URL actions in a dashboard to feed the latitude and longitude of a location selected on a map.  The URL is going to reference an HTML webpage that uses JavaScript to take in the Latitude and Longitude from Tableau and display a Google Street View interactive page.  Sound simple? It's easier than you think.

Getting a Google Maps API Key

First things first - for both solutions you're going to need a Google Maps API key.  Don't have a Google account?  It's time to join the NSA and the rest of us and get one.  Once you have that in place, it's time to get going with your API Keys by going here. Decide which APIs you want to turn on. Me? I turned on most anything that looked like it had to do with Maps and was free :)


Go ahead and make your note of that API key, as we're going to need it in just a minute. 

Set up a Tableau Dashboard

This is as simple as having a map with points on it, bringing it on to a dashboard and adding a blank webpage that will ultimately return our Google Street View.  Here's a simple example:


You're going to take your dashboard, with the map and blank web page and feed it a magical URL - here's what goes into it...

How to setup and create the URL Action

The URL is going to reference one of the HTML files from here (or you can write your own - and send me a copy), which has your Google Maps API key pasted in (this is what you wrote down from above).



The file is then placed by you either on your local machine (like on your computer's C drive ) or a web server (like something that starts with http://....).

Placing the HTML file on your local machine is simplest, but this means that it can only be accessed by you on this one machine - not very useful if you plan on sharing this dashboard with anyone - or on Tableau Public.

If you want to share it with the world, you're going to need to use a web server.  A web server is what starts with http://.....  and can be accessed be anyone who can hit the server. Want to set one up?  I did, using an Azure VM and Ben Sullin's favorite WAMP Server, the scope of which is above and beyond what we're going to cover here.  Trust me, me teaching you about VMs and Web Servers would be the definition of the blind leading the blind - but take heart - if I can do it, so can you!

Ok, so once the HTML file is in place (and you note it's location) you can use these example of the URL you'll type into the Tableau URL action. 

If the HTML file is on your local machine, then the URL looks something like this:
file:///<path to file>/gstreetview.html?lat=<Latitude>&lon=<Longitude> 

or for example:

file:///c:/wamp/www/gmaps/gstreetview.html?lat=<Latitude>&lon=<Longitude>

If the HTML File is on a web server, then you just reference that:
http://<server ip or dns name>/<folder>/gstreetview.html?lat=<Latitude (generated)>&lon=<Longitude (generated)>

or for example:

http://tndtableau.cloudapp.net/gmaps/gstreetview.html?lat=<Latitude (generated)>&lon=<Longitude (generated)>

The file has javascript that takes in the two parameters that get named "lat" and "lon" in the url and returns a Google Street View fullscreen page right there in the dashboard.  So when you put it all together you get something like this:



As you can see there's two tabs - one that's returning a Google Street View window and the other is returning directions for origin-destination routing.  This is using a different HTML file, which is calling on the Google Maps Directions API, and feeding it four parameters OrgLat, OrgLon, DestLat, and DestLon.  The point here is that ALL the APIs for any service could now be in your hands :) meaning that the possibilities are endless!

Also, so long as I'm running my web server (for which I make zero promises of level of service, and reserve the right to shut down at any time), you can use it for your own use.  Just simply use the following URLs and you'll be able to leverage the Streetview and Directions sheets just as I have without having to host the files anywhere (because I'm hosting them for you - see what a nice guy I am?)

Street View:
http://tndtableau.cloudapp.net/gmaps/gstreetview.html?lat=<Latitude>&lon=<Longitude>

Directions:
http://tndtableau.cloudapp.net/gmaps/orgdestdir.html?OrgLat=<DC Latitude>&OrgLon=<DC Longitude>&DestLat=<Latitude>&DestLon=<Longitude>


I hope that helps! Welcome back to Google Maps to the Tableau Toolkit.  Happy Mapping month.  Can't wait to see everyone in Seattle in a couple weeks!

Nelson

29 comments:

  1. Hi Nelson, I'm very thankful for your explanation, I followed all the steps and got the same good results with street view, however when it came to publishing I encounter the following problem: a shield icon on top right of Chrome, and a message "This page includes scripts from unauthenticated sources". I checked the shareable link of your dashboard but it didn't present the same problem. Is there any way I can eliminate this problem?
    https://public.tableausoftware.com/profile/elemiah#!/vizhome/shared/TRZ9F39JX
    Thanks, Luis

    ReplyDelete
    Replies
    1. Hey Luis -
      You just check that box and keep moving. Don't worry about the unsafe script message.

      Delete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
  3. Nelson. You. Are. The. Man. Thanks!!

    ReplyDelete
  4. Hi Nelson, thank you so much for writing this article, really is a great help! So I followed the instruction and finally got the google street view to work in my dashboard. Then when I posted it on the Tableau server, it seems that the street views for the same locations, are not the same as the ones in the desktop version, so are the addresses showing on the street view. So I went back and downloaded your dashboard, and I found out that your dashboard has the same issue as well, the street view showing in the desktop version is not the same as the dashboard that you posted in this article. I was wondering if you had realized this issue and if you by any chance had got the chance to find out what the problem is and how to fix it. Thanks a lot!

    ReplyDelete
    Replies
    1. JL - Interesting find. How far off are we talking? Could it just be pointed in a different direction?

      Delete
  5. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
    2. Hi Nelson, thank you very much for your kind and detailed explanations. I followed the steps you outlined and it worked great! One thing, when published online (I am using Tableau Public), the map wouldn't load so I tried a few things and figured that using http, instead https would work..

      One question, would you happen to have a code for Google satellite maps with an option of seeing using street view (orange person at the right bottom corner).. Thanks!!!

      Delete
    3. From the Google API: https://developers.google.com/maps/documentation/javascript/examples/aerial-simple
      You would just add mapTypeId: google.maps.MapTypeId.SATELLITE here in your version of the JS file:

      function initialize() {
      var mapOptions = {
      center: new google.maps.LatLng(36.964645, -122.01523),
      zoom: 18,
      mapTypeId: google.maps.MapTypeId.SATELLITE
      };

      Hope that helps!

      Delete
  6. Hi Nelson,

    First, I would like to say many thanks for this gem of a page. Although I am new to Tableau & html, I found your descriptions easy to comprehend. I followed your tutorial and made an API key, but am still unable to generate maps through the dashboard action commands--"JavaScript Alert: This page was unable to display a Google Maps element. The provided Google API key is invalid or this site is not authorized to use it." It just shows up on my dashboard as a blank map until the aforementioned error pops up.

    The only difference is that I'm utilizing a local HTML file (i.e. file:///C:/Users/Reid/Desktop/BakerLab.html?lat=&lon=) with the script from your, 'gstreetview'. I suspect that this is probably an access or credentials problem with the Google Maps API authorization, but if I leave the 'referrers' section blank it says requests will be accepted from any referrer. With mine being blank for my project, I'm unsure as to why I keep getting this error. Is there something I'm forgetting? Do I have to state clearance for the tableau application to utilize this API key?

    Thanks again!

    ReplyDelete
    Replies
    1. Reid - I'm not sure what's going on on your end, because I can't seem to replicate your issue on my end. I'm certain it's not an issue of having the HTML file local - I ran fine that way for a while. Any suggestion that I'd make would be totally shooting in the dark, but I'm guessing that it's an issue with the API key or the URL isn't done correctly.

      Happy to talk through it more, but I'm not sure I'll be able to solve it.

      Delete
    2. Reid -
      What happens if you input this URL in your browser: http://tndtableau.cloudapp.net/gmaps/gstreetview.html?lat=33.8&lon=-84.2

      Delete
  7. Hi Nelson,

    I'm also facing the same problem of being unable to load the maps from the URL. I'm using tableau public and was trying to link it to your url http://tndtableau.cloudapp.net/gmaps/gstreetview.html?lat=&lon=
    Any ideas?

    Thanks

    ReplyDelete
    Replies
    1. http://tndtableau.cloudapp.net/gmaps/gstreetview.html?lat=&lon=

      Delete
    2. Ming -
      What happens if you input this URL into your browser: http://tndtableau.cloudapp.net/gmaps/gstreetview.html?lat=33.8&lon=-84.2

      Delete
  8. Nelson, thanks for a useful post! I was able to embed Google satellite view into Tableau dashboard and publish to server. It does take some time for people who haven't done this to understand everything, but your step-by-step instruction is spot on.

    ReplyDelete
  9. This is amazing! I think I'm almost there but I'm having 1 issue.

    In the URL if I type the Lat and Long coordinates then it works fine. However when I try to reference the data by putting

    http://tndtableau.cloudapp.net/gmaps/gstreetview.html?lat=&lon=

    I get a grey screen. Do I need to reference the sheet that these dimensions come from?

    Thanks
    Ali

    ReplyDelete
    Replies
    1. This is amazing! I think I'm almost there but I'm having 1 issue.

      In the URL if I type the Lat and Long coordinates then it works fine. However when I try to reference the data by putting or

      http://tndtableau.cloudapp.net/gmaps/gstreetview.html?lat=&lon=

      I get a grey screen. Do I need to reference the sheet that these dimensions come from?

      Thanks
      Ali

      Delete
  10. Thank you , Nelson. For sharing you great job and web server. :)

    ReplyDelete
  11. Nelson: awesome examples and very well documented. I assume that adding Google determined driving time in addition to route is straightforward and just a setting ? have you created anything similar to a driving time / distance analysis ??? any points in the right direction are much appreciated. tx Douglas

    ReplyDelete
  12. Very interesting and useful, great job at walking the reader through the steps.

    There appears to be a new glitch (at least for me - running Chrome on Mac OS X). The last view returns:


    TableauException: Failed to connect to WMS server. Error 400: HTTP bad request
    2016-02-02 22:21:29.789 (VrEr5grCQYMAABOAr2cAAAPl,0,0)

    ReplyDelete
  13. Very interesting and useful, great job at walking the reader through the steps.

    There appears to be a new glitch (at least for me - running Chrome on Mac OS X). The last view returns:


    TableauException: Failed to connect to WMS server. Error 400: HTTP bad request
    2016-02-02 22:21:29.789 (VrEr5grCQYMAABOAr2cAAAPl,0,0)

    ReplyDelete
  14. This comment has been removed by a blog administrator.

    ReplyDelete
  15. I'm not able to acces http://tndtableau.cloudapp.net anymore to use the streetview options.
    Has the site been taken offline?

    ReplyDelete
  16. I want to analyse my Google map timeline (the places I visited which can be sen through passing credentials).How to initiate for the same to connect with tableau?Is there any useful link for this for this?

    ReplyDelete
  17. I'm able to use the link you provided to ada the map to my dashboard, but when I upload it to my company's tableau server there's a message where the map once was that says "this content can not be displayed in a frame"... any ideas for a resolution?

    ReplyDelete
  18. Enpersol offers Tableau Consulting Services, specializing in implementation and dashboarding in pune and indore. also help you, whether you're just starting out with Tableau, or you need some advanced expertise.

    ReplyDelete