Additional Functionality with Custom Google Maps

As I briefly mentioned in my last post about Custom Google Maps, additional functionality would be added.  Well, the Interactive Campus Map has a couple of new features:

• CrimsonRide Bus Stops and Routes
• UA Parking Map

When you first load the map, you will see that tabs have been added to allow switching between the different maps in the exact way that Google Maps switches between Maps, Satellite, and Terrain (except here we switch to our custom maps).  By setting up an event to detect which tab has been selected, we can do many complex things such as displaying a whole new set of tiles, markers, and other information.

Basically, we can use the Google Maps API to display three sets of similar information in one location, which is a huge advantage for our users.

Here’s a quick rundown of how the CrimsonRide map works:

• Uses the standard 2D campus map
• Loads a different XML file that replaces the building markers with bus stop markers
• Display bus route filter check boxes
• Clicking on a route check box will draw a vector line (SVG) based off points we collected and contained in a separate XML file
• It will also draw arrows indicating the direction of the route

Let me take a minute to discuss the vector lines.  The biggest drawback is that SVG support across browsers is inconsistent.  Firefox and Opera have the best rendering, IE is next, with Safari and Chrome coming in last.  Firefox and Opera both display the dashed lines and arrows.  IE displays the dashed lines but no arrows.  Safari and Chrome only display a solid line.  Regardless, drawing the routes this way is ideal because it allows me to overlay a browser-rendered scalable line instead of an image which is slow to load and does not scale.  In the future we can take this one step further and draw polygons.

Finally, I would like to mention that this is not intended to replace the maps of CrimsonRide or UA Parking, but rather to bring additional functionality to the campus tour site by including their information on the Interactive Campus Map.