data, data journalism, data visualization, HTML, Interactivity, maps

How to: create maps with interactive tables from Google spreadsheets

I just discovered Awesome Table, a tool that allows users to visualise Google sheets into maps, tables, graphics, cards, etc. without coding skills.

This gadget contains multiple extensions that make interactivity easy. Geocode, for instance, is an add-on that geolocalises data from the spreadsheet and creates a map with interactive tables.

Here I explain how to do it in 6 steps:

1. Get Geocode on Google Chrome web store.

2. Create a spreadsheet or re-use an existing one

Make sure that the spreadsheet contains a column with the location (full address or postcodes).

address

3. Go to Add-ons -> Geocode by Awesome Table -> Start Geocoding

Table-addon

4. Select the column that contains the location and click on Geocode!

location geocode

Awesome Table will start getting latitudes and longitudes in two new columns next to the address.

gecode

5. Customise the tooltip

Choose the columns with the information that you want to display when clicking on a marker.

Screen Shot 2016-08-02 at 20.15.47Screen Shot 2016-08-02 at 20.16.20

6. Create and open the map to visualise it:

 

Take some time to review the markers and check the information on the table by using the filters. You can go back to change the tooltip information (knowing some HTML and CSS will allow you to go further on the design).

output_qFAxvB

Embedding the visualisation in 5 steps

1. Sign in on Awesome Tables and select new view

2. Create a new sheet

Screen Shot 2016-08-02 at 20.41.15

and paste the URL from the Google spreadsheet:

docslink

3. Choose the view that you want to display. In this case, a map with a table

output_pr7ZVE

4. Give a title to the visualisation and save it

titlesave

5. Get the code to embed the map on a website:

Screen Shot 2016-08-02 at 20.51.38

 

Do you have more examples? Let me know in the comments or on Twitter at @mcrosasb

Advertisements
Standard

One thought on “How to: create maps with interactive tables from Google spreadsheets

  1. Hi
    thanks for explaining clearly!
    how can you remove the big green bar above the map?
    is it possible at all?

    kind regards
    eric kramer

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s