Fun With Google Maps API


For my latest personal project, I decided to combine my love of travel with my need to dive deeper into the Google Maps API. I’ve done a lot of work with the API, but usually just the basics of changing the maps styles and visuals. This time, I wanted to learn the ability to create paths from pin to pin, to mark my travel destinations and vacations.

I had to make it a bit more difficult than just adding pins to a map. That is easy enough with a few lines of code in the API. Instead I needed several features:

  1. I wanted all pins to have a path from the home base to it’s destination.
  2. I’ve lived in multiple locations, so I need the ability to have more than one home base (Nashville and London for me)
  3. Most trips, I only visited 1 main location and came back to the home base. But some trips (like my cruises or month long Europe trips), I visited several cities and/or countries in one trip. So I needed the ability to map multiple locations in one long line as well.
  4. I needed different pin colors for my home bases, visited and upcoming trips. Upcoming trips are those I’m actively planning for, or have already paid for.

All of this is very doable in the API, but combined with my wishes to make it some sort of plugin, or at least readable enough for other developers to take and use for themselves, made this project extremely difficult for me. I’ve never been great with APIs or JS, and the extent of my jQuery knowledge itself usually deals with animations. I’m not very knowledgable when it comes to using JS for other, non-animation functionality.

This map is still a work in progress, and the code is less than ideal. But it’s a good start and on it’s 4th iteration.

View the demo (and my personal map).

Grab the code on Github.