Come take a rAPId Trip with Me

This week, my colleague Heather and I, attempted an API mashup of Google Maps and Spotify. Our original idea was to leverage the data from Google Maps locations in the world and combine it with either traditional or popular music from those areas of the world with the data from Spotify. What ensued was a series of attempts to get permissions for keys, and watching a bunch of “how to” videos.

The first problem we ran into was knowing where to “mash” or integrate the data together. I’m still not sure if this is done in VScode or on a website like Postman. After trying to gain access to Google Maps API, and slowly realizing that you have to connect it to a billing account, we found a Coding Train video called “Working with Data and APIs in JavaScript” found here: https://www.youtube.com/watch?v=uxf0--uiX0I&ab_channel=TheCodingTrain. In this video the instructor gains access to an open API of the International Space Station. He uses a website called “Leaflet” for their map, and another website called “Where the ISS at?”. We went to his Github Repo and copied the code into VScode and ran it in the browser, and we had officially connected to an open API!
The website shows a map of the International Space Station moving and updating in real time. The latitude and longitude automatically update on the site as the ISS moves about the globe.

Step 2 for us was trying to find out how in the heck to code in the Spotify API to have it play music corresponding with the region the ISS was currently hovering over. This part did not completely come to fruition as we could not figure out how to properly code in the Spotify API SDK offered on their “Spotify Developer” page. Instead, we found a workaround to just embed one song onto the webpage. Heather chose “Rocket Man” by Elton John, and I landed on “Come Fly with Me” by Frank Sinatra.
Below is the finished product:

And here is the Github Repo: https://github.com/JacqWal/Come-fly-with-me