Try it out now! https://coda.io/packs/trip-map-13904

Inspiration

Me and my girlfriend use Coda to plan our yearly road trips. I wanted a way for us to visualize our journey on Coda. So that we can see all the places we went on our trip and how many miles it was!

What it does

This pack takes in a list of locations (coordinates, city, business, location, or keyword) from a table or list and then displays it using the Google Maps Embed API.

How we built it

First I had to find the right api that would fit into a Coda pack. I initially wanted to use HTML/JS to create the map using the document property but that was not feasible. So I settled on using Google's Simplest map api, their embed map api. Using this api I was able to simply loop through all locations in the list. I used the first item as the origin and the last as the destination. Then all locations in the middle were treated as "waypoints" that showed on the map as intermediary locations. This url is then returned as a coda embed object. Viola, we have an embedded google map showing all the locations on your next roadtrip! As you update the table the embedded object will also update!

Challenges we ran into

I ran into a few issues at first. Initially wanting to build the map using googles standard javascript sdk but Coda did not allow for the returning of complete HTML so I was unable too.

The next problem I ran into was the handling of API keys, I initially wanted to have the user provide their own google map api key and then utilize that. However Coda does not allow you to reference api keys directly (only referenced when fetching) which made returning the Google map url with the api key impossible. Luckily I was able to restrict my own api key and Google allows unlimited usage for the embed api so I simply hardcoded my key.

Accomplishments that we're proud of

I was able to complete this in a single day! It worked out of the box with all different types of locations, coordinates and keywords I could throw at it!

What we learned

How to make and publish a coda pack! How to utilize different Google maps apis. Using auth keys inside a Coda Pack.

What's next for Trip Mapper

Finding ways to add pins to a custom google map and then embedding that. Allowing you to add custom pins with more information about your trip! Unfortunately googles api for creating custom maps is nonexistent :/

Share this project:

Updates