Behind every seemingly simple, technological process we take for granted, there are a million tiny processes working in unison to fulfill our requests.
For example, ask Google for directions to your favorite restaurant. In a moment you're presented with different transportation modes, different route options, times and mileage estimates. Shoot, Google will even tell you if the place you’re visiting is going to close within a half hour of your arrival.
By tapping into the complex system that is Google Maps, we were able to illustrate a story we’ve heard time and time again: that not having a car can be a burden affecting not only how long it takes to get from A to B, but whether you can make it to B at all.
What We Set Out To Accomplish
We wanted to create a map that would allow a user to input an origin and a destination, and then be shown navigation routes via both car and bus. We also wanted to animate these routes from start to finish, keeping the time it took to complete the car and the bus routes proportional.
For example, if it takes 10 minutes to get from A to B in a car, and 30 minutes to get from A to B on a bus, the animated map should show the car route completing in a third of the time that it takes the bus route to complete.
Here are the things we knew we’d need to figure out:
- Allow user to input origin and destination;
- Ask Google for the fastest car directions;
- Ask Google for the fastest bus directions;
- Determine the ratio of car route duration to bus route duration;
- Set the car route animation to complete in a set amount of time;
- Set the bus route animation to complete in the amount of time it takes the car to complete times the bus-to-car ratio.
In order to accomplish those tasks, we needed to understand how Google Maps Directions work.
How does Google Map Work?
1. Allow user to input origin and destination
In order to provide the user with an easy way to enter their origin and destination, we used a Google Places search bar. This search bar allows you to start typing an address or location name and then provides you with suggestions based on what it thinks you mean.
2. Ask Google for the fastest car directions
When you ask Google Maps for directions, it processes that request in a variety of different steps.
First, it looks for a mode of transportation. If you don’t tell Google your mode of transportation, it’s generally going to default to car.
Next, it determines different routes you could take. Each route contains a route description (“US-40”), duration, distance and list of steps. Each step also has its own description (“At 42nd St., take a left”), duration and distance.
In that list of different routes, the first route is the fastest and/or the most convenient.
We used code to ask for the first car route between the user’s origin and destination.
3. Ask Google for the fastest bus directions
Asking Google for bus directions is similar to asking for car directions. You’re presented with routes and steps, durations and distances.
For this one, we asked Google for the first bus route between origin and destination.
4. Determine the ratio of car route duration to bus route duration
In addition to giving us human-readable durations (8 min or 6 h 9 min) Google also provides the duration in seconds. To get the ratio between bus and car we divided the bus duration by the car duration.
Example:
carDuration = 503 seconds
busDuration = 1514 seconds
busToCarRatio = 3.0099403578528827
5. Set the car route animation to complete in a set amount of time
We didn’t want the reader to have to wait around for 1514 seconds (25 minutes) just to experience this app, so we decided to set the car route animation times to something constant. So no matter how long the car duration actually is, the car animation will complete in 10 seconds.
6. Set the bus route animation to complete in the amount of time it takes the car to complete, times the bus-to-car ratio
Here’s where we get to use that busToCarRatio number we figured out earlier. If we’re setting the car animation to complete in 10 seconds, then we want the bus animation to complete in 10 x 3.0099403578528827 seconds, or around 30 seconds.
And, in a nutshell, that's how we did it!
If you find yourself asking, “But how did she actually animate the routes?!” or “I wonder if I could make something like this…?”, then I applaud you for you are a true nerd. And for true nerds like you, we have published the full source code on Github.
The Bottom Line
As WFPL’s Amina Elahi reported in her story, vast disparities exist in Louisville, and those can be exacerbated by a lack of access to transportation. If you’re a car driver, check out the app and think about all the things you do with the minutes you save by driving. Think about how many choices you have at your fingertips when it comes to employment and childcare and grocery shopping. Think about the limited amount of leisure time you might enjoy on a weeknight. Then consider how your life would be different if every commute took two to three times longer.