Showing the transit layer with the Google Maps API

While Google Maps has a very useful transit layer (showing subway lines, bus stops, etc.) available when zoomed in on a city, this layer is unfortunately not exposed via the Google Maps API. However, as demonstrated on BlinkTag Inc. by Brendan Nee, it’s possible to load the transit layer as a custom tile layers, pulling the transit layer images directly from Google’s servers.

// add transit overlay
var transitOptions = {
getTileUrl:
function (coord, zoom)
{
return "http://mt1.google.com/vt/lyrs=m@155076273,transit:comp|vm:&" + "hl=en&opts=r&s=Galil&z=" + zoom + "&x=" + coord.x + "&y=" + coord.y;
},

tileSize:
new google.maps.Size(256, 256),
isPng:
true
};

var transitMapType = new google.maps.ImageMapType(transitOptions);
map.overlayMapTypes.insertAt(0, transitMapType);    

Google Maps, Transit Layer, Subway - NYC, City Hall


However, there are 2 issues you may quickly notice:

1. Custom styling applied to the base layer is lost.
This is because full image tiles are loaded, which completely obscures the lower layer. A solution to this is to find and copy the apistyle and style URL parameters when the base layer is loaded (you can do this by looking at the GET requests with a tool like Firebug). You then simply add these paremeters to the URL returned by the getTileUrl() function.

getTileUrl: function (coord, zoom)
{
return "http://mt1.google.com/vt/lyrs=m@155076273,transit:comp|vm:&" + "hl=en&opts=r&s=Galil&z=" + zoom + "&x=" + coord.x + "&y=" + coord.y + "&apistyle=s.t%3A3%7Cp.h%3A%23C5C5C5%7Cp.s%3A-100%7Cp.l%3A37%7Cp.v%3Aon%2Cs.t%3A35%7Cp.h%3A%23F284FF%7Cp.s%3A100%7Cp.l%3A-9%7Cp.v%3Aon%2Cs.t%3A81%7Cp.v%3Aoff&s=Gal&style=api%7Csmartmaps";
},

Google Maps, Transit Layer, Subway - NYC, City Hall

2. The large subway stop markers are useless
In New York City at least, it’s impossible to identify train lines by color alone, so it’s fairly important to see the letter or number identifier for trains at the different stations. The map has both large and small markers for each station, but only the small markers shows this information. I couldn’t figure out a way to get the larger marker to show the letters/numbers, but by changing “vm:” to “vm:1” you can completely remove the large markers from the map. However, this also shrinks the size of the lines indicating the train routes.

getTileUrl: function (coord, zoom)
{
return "http://mt1.google.com/vt/lyrs=m@155076273,transit:comp|vm:1&" + "hl=en&opts=r&s=Galil&z=" + zoom + "&x=" + coord.x + "&y=" + coord.y + "&apistyle=s.t%3A3%7Cp.h%3A%23C5C5C5%7Cp.s%3A-100%7Cp.l%3A37%7Cp.v%3Aon%2Cs.t%3A35%7Cp.h%3A%23F284FF%7Cp.s%3A100%7Cp.l%3A-9%7Cp.v%3Aon%2Cs.t%3A81%7Cp.v%3Aoff&s=Gal&style=api%7Csmartmaps";
},

Google Maps, Transit Layer, Subway - NYC, City Hall

There is a third issue that’s pretty noticeable as well: bus stops do not how the identifier of the buses that stop at them. I’ve yet to find a way to show them.

5 Comments

  1. […] previously wrote about showing the transit layer with the Google Maps API, this is somewhat of a continuation, but narrower in scope; here I’ll talk about showing […]

  2. How did you style the transit lines?

  3. Avishkar Autar

    @Alexander I didn’t, the styles were baked into the tiles returned by the API.

  4. Alexander

    Hello,

    thanks for this tutorial and your help. I am still struggling with this “Custom styling applied to the base layer is lost.” issue.

    I use the progress map framework and it loads the tiles like this:

    http://mt1.googleapis.com/vt?pb=!1m4!1m3!1i14!2i8511!3i5490!2m3!1e0!2sm!3i280000000!3m14!2sde!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcy50OjV8cC52Om9mZixzLnQ6NXxwLnY6b258cC5jOiNmZmZmZmZmZixzLnQ6NDl8cy5lOmd8cC52Om9mZixzLnQ6NTB8cy5lOmd8cC52Om9mZixzLnQ6NTF8cy5lOmd8cC52Om9mZixzLnQ6MXxzLmU6Z3xwLnY6b2ZmLHMudDozfHAudjpvZmYscy50OjJ8cy5lOmd8cC52Om9mZixzLnQ6NnxzLmU6bHxwLnY6b2ZmLHMudDoxfHAudjpvZmYscy50OjJ8cC52Om9mZixzLnQ6NHxwLnY6b24!4e0!20m1!1b1

    Is there a way to use this URL for the getTileUrl function?
    Is there a way to convert the styles array into the apityles string?

    http://www.mapstylr.com/style/light-monochrome/

    Regards,
    Alexander

  5. Alexander

    I don’t lose the map style when i add the transit this way:
    var transitLayer = new google.maps.TransitLayer();
    transitLayer.setMap(mapObject);