TTC Google Maps for all!

I just spent a few minutes factoring out my TTC subway map Javascript code so that it can be called to insert the TTC subway into any Google Map:

<div id="map">
<script src="" 
<script type="text/javascript">
    var map = new GMap( document.getElementById( "map" ) );
    map.addControl( new GSmallMapControl() );
    map.centerAndZoom( new GPoint( -79.386871, 43.660241 ), 4 );

    // Add your own markers and polylines here.

    drawTtcSubwayMap( map );

There are two other additional functions, drawTtcSubwayMapColor() and writeTtcSubwayStations(), which can be used to specify the colors for the different subway lines and to display the colour-coded list in a div, respectively. I might add more helper methods later if there is a demand for them.

You can affect how the stations appear in the info pop-up by styling div elements of the station class.

Originally I had thought to limit access to my Javascript file to those who asked permission to use it. Doing so would make me aware of how people were using the map. For now, people are free to link the Javascript in their pages. All I ask is that you leave a comment on my weblog with a link to your page, and include the following HTML somewhere near the map:

<p>TTC station code and coordinates provided by 
<a href="">Ian Stevens</a> and his 
<a href="">TTC Subway Google Map</a>.</p>

Linking, not copying, the script has its advantages, namely that any changes or additions that I make will propagate to your map. There are also a few known bugs, all of which have to do with Internet Explorer, that I hope to address soon.

  1. Paul Krohn

    August 2, 2005 at 1:56 am

    Hi, good work on the TTC Google map. I’d love to be able to overlay that on Google maps of th GTA, since I am new to the area and looking for a transit-friendly place to live. Any tips on the subject?

    Thanks again …

  2. Ian Stevens

    August 2, 2005 at 10:48 am

    Google does currently support overlaying of third-party information over a map generated by a Google Maps search and their Google Maps API does not provide search functionality. My code is really intended for sites who wish to hard-code locations on a map and who wish to include the subway on that map.

  3. istevens

    August 3, 2005 at 3:34 pm

    Hi Ian- We added the subway lines to our map (see my Homepage) – but we can’t seem to get the icons displayed (although their shadows are appearing). Any thoughts on what might be causing this?

  4. Ian Stevens

    August 3, 2005 at 5:53 pm

    If the shadows are being displayed then the markers are being drawn. It’s possible that the image file is not being loaded, although its full-path is set for the icon image. If you click on the shadow to bring up the textbox, what do you see?

    I’ll see if I can replicate this.

  5. Ian Stevens

    August 3, 2005 at 8:36 pm

    OK, this is fixed. The problem was that your createMarker() function was overriding my createMarker() function. I have since prepended all my methods with “CM_” to avoid this possibility.

  6. r0tt3n

    September 20, 2005 at 12:07 pm

    Just wanted to say very nice work using google’s map api. I’ve been very frustrated by the brutal rideguide pdf the ttc supplies, and read about a site that implemented google’s api for the new york subway system ’bout a month ago. Finally google maps + ttc == true, end sub.

  7. fac3less

    November 8, 2005 at 11:43 am

    Nice work! :)
    Just an additional note: It would be very cool if this was overlayed onto (craigslist – Toronto, etc.)!

    Nonetheless great work.

  8. dinger

    November 17, 2005 at 2:13 pm

    Any chance you could add the Toronto area go train stations to this map?

    Then you’d have a really good idea of all your commuting options.

  9. banditski

    July 7, 2006 at 4:39 pm

    very cool and useful. i just used it to show a friend from out of town how to get to my place. thanks.

    one request would be to be able to resize the portion containing the map itself. the map only takes up about a quarter of my screen.

    again, thanks.

  10. Ilia Broudno

    August 2, 2006 at 8:57 pm

    Good job.
    TTC’s own embarassing hack of a website can sure learn something here.
    I was actually looking for a full transit map: street cars and buses etc and all they have is a huge unworkable PDF.
    What we need is a page that lets you get transit directions for getting from point a to point b like google maps does, but with transit.
    This is of course a bit more complex problem.
    May be they can hire you to fix them up.

  11. Econojon

    January 11, 2007 at 4:42 pm

    by the way, looking at the links in the comments, and trying the code on a blank page, it is not working. Any idea what I am doing wrong?

Leave a Reply