Google Maps Platform: Interactive Map of the Paris Metro

Maps Platform

Product updates, customer stories, and tips and tricks on Google Maps Platform

Interactive Map of the Paris Metro

Wednesday, August 14, 2013

Map of the Week: Interactive Map of the Paris Metro
Interesting Maps API Components used: Geometry Library, KMLLayer, Styled Maps, Polylines, InfoWindows, Symbols, Markers

This week we are featuring a sample app by the French web development house Medusis. They have put together a custom directions application that guides you between Paris metro stations. It is available in both French and English. It is a beautiful app that uses several interesting features of the Maps API, some of which may not be immediately obvious.

The map is centered, naturally, on the city of Paris. The Paris Metro network is shown using a KMLLayer object. That way they can load in a large amount of unchanging data. You’ll also notice that the base map is styled to mute it to emphasize the metro lines, while preserving access to the Google base map data.

To find directions you can either use the drop down boxes in the top left or simply click on the stations. Notice that a couple of things happen. The KMLLayer that loaded the original layers switches to a grayscale KML file, to allow the use of Polylines to emphasize only the routes needed.

Each station also gets an InfoWindow that has the icons of the Metro lines serving that station. Each trip can be made of more than one Metro line. The portion of the line used in a particular trip is highlighted by using a Polyline. Markers for hubs and the origin and destination are highlighted using a Circle Symbol.

The map uses its own algorithm to compute the best route, using our Geometry Library to calculate distances to find the correct route.

This is a great demonstration piece on using the Google Maps API to show custom data. Well done Medusis.

Posted by Mano Marks, Maps Developer Relations Team