3.9 Metro Web – Mapping real time bus locations

Week 3 Extra Credit Web Assignment

You are asked to complete the Metro Web project by mapping the real time location of buses. In order to accomplish this, you will need to make a new call to the Metro API that retrieves the location of buses on any given route:


The real time buses must be mapped when a user selects a route. This means that all bus stops for a given route will be mapped, and on top of that, you will map the location of where buses are currently running on that route.

Make sure to select a new icon for your real time buses to differentiate with the bus stop locations.

*Hint #1*
Add the .getJSON call to get real time buses in the same function that you call for the bus stops (mapBusStops).

*Hint #2*
Create a new function to create live buses. This function would be similar to the “createStop” function.

*Hint #3*
In order to make sure the real time buses show up on top (and not below) the bus stop location, use the zIndex option when you create the google marker. Higher zIndex values mean that the icon will be drawn on top of lower zIndex icons.


#Hint #4*
Are you removing your live bus icons when you click on a new bus route? Make sure to do so by modifying the removeLayer function.

Leave a Reply