Google Maps API v3 now allows you to add the Bike route layer and traffic layer via the API, but there still isn’t an easy way to get at the transit layer.

To add the Bike layer:

To add the Traffic layer:

However, you can use the code below to add the Google Transit layer it as a custom tile layer. This will load the image tiles directly from Google’s servers:

This loads the full image types, so any other styles you’ve applied to the basemap will get covered up. Unlike Google Transit, the stations won’t be clickable and transit info won’t pop up unless you add your own markers to the map, but this should work ok for just showing transit routes.

You can see this technique live in our Realtime Transit Map project (also on github).

I think its actually a useful app, its quick and uses geolocation to grab your location making it one click (after you load the page) to generate a walking tour. It has links to google streetview and offers an elevation profile of the walk and optimizes the route to hit as many points of interest in as little distance as possible. It uses google maps walking directions for the base layer, and it seems to do pretty well with knowing pedestrian paths throughout the city.

I plan to add a few more features in the near future – I didn’t have time to add everything I imagined during the overnight coding challenge:

• Some way to specify what types of points of interest you’d like to walk by
• A way to specify roughly how long of a tour you’d like
• More crazy points of interest based on my experience in SF
• Extend it to work in other cities where I can get enough points of interest, perhaps using SimpleGeo Places API
• A way to save your walk so you can come back to it later
• Descriptions of the points of interest

The code is on github – its currently all client-side using jquery mobile and google maps API, google Fusion tables and other google APIs. Please fork it and add your own ideas or connect it to a different fusion table with your own set of points of interest.

For those of you who haven’t tried bikesy, it lets you choose both a hill tolerance (how much you’d like to reroute to avoid San Francisco’s steep hills) and a safety level (how much you’d like to reroute to stay on bike routes and lanes). You can always visit Bikesy.com to find safe, fast bike routes around the San Francisco Bay Area but now you can add it as a Chrome App. This will do two things:

1. It will show up on your apps list when you open a new tab. This makes it fast and easy to launch Bikesy right before you set off on a bike trip to get route suggestions.

2. You’ll only need to approve geolocation once. Chrome apps allow you to grant access to bikesy.com to find your location based on browser geolocation once. The next time you return to bikesy.com and click “Map to my current location” it will just work.

Give it a try – add the Bikesy Chrome Application or just visit bikesy.com.

However, there currently isn’t a way to get display the transit or bike map layer. However, Google Maps allows you to create your own tile layer and load in into the map. It’s not too difficult to create your own custom tile layer and actually refer to the actual bike map or transit map tiles and load them directly from Google.

The URL template you need for getting bike maps is:

http://mt1.google.com/vt/lyrs=m@121,bike&hl=en&x={X}&y={Y}&z={Z}

and for transit maps:

http://mt1.google.com/vt/lyrs=m@121,transit|vm:1&hl=en&opts=r&x={X}&y={Y}&z={Z}

To create your own tile layer, use one of the URL templates above:

function initialize() {
  var map = new GMap2(document.getElementById("map_canvas"));
  map.setCenter(new GLatLng(37.880002, -122.189941), 11);

  //Create new Tile Layer
  var gTileUrlTemplate = 'http://mt1.google.com/vt/lyrs=m@121,bike&hl=en&x={X}&y={Y}&z={Z}';
  var tileLayerOverlay = new GTileLayerOverlay(
    new GTileLayer(null, null, null, {
      tileUrlTemplate: gTileUrlTemplate,
      isPng:true,
      opacity:0.8
    })
  );
  map.addOverlay(tileLayerOverlay);
  }

These URLs could change at any time, so there is no guarantee that this won’t break. You can see this in action at whereisbart.com

I’m curious how long it will take google maps to automatcally reroute around the bridge closure and what systems they have in place for verifying and updating info on emergency closures to key transportation links. As more people start to rely on online maps for traffic info it becomes increasingly important for emergency info to make it’s way online quickly.

So this might be kind of a gray area terms-of-service-wise, so do what you want with it. But if you’ve ever wondered how to mashup the Google Transit layer with your custom map, here’s how.

While we aren’t advocating anybody actually do this, we’ve heard from a *confidential* source that Google implements new feature requests in rough proportion to the number of people who hack together stuff like this. Just saying . . . .

Freeway traffic had been a feature of google maps for a while, but providing traffic conditions on non-freeways is especially useful for travel within SF as most car trips don’t involve travel on a freeway. San Francisco has removed several freeways in recent years, freeways are useful for getting to/from the city but not as much for travel within the city.

The traffic data is actually crowdsourced from people sharing their location from google maps for mobile, read more on the google blog. I’m not sure if this includes iphone users as we can’t run background apps.

You’d think it would be easy to change the stacking order of things you overlay in Google Maps, right? Like, no one wants that stupid AC Transit logo to go underneath the polygon they drew . . . . . you’d think . . . .

Anyways, after like five or six hours of poking around on forums I found a solution.

First, it turns out that overlays on Google Maps have both a ZIndex and a “GPane” associated with them. If you change the ZIndex, you change the order in which objects on the same pane are displayed. Turns out that polygons and ground overlays (like the AC Transit image) are automatically added to the same pane, so no help there.

Here’s the magic. Google lets you create custom overlay classes, where you can specify GPanes for individual images or whatever. But it looks really hard, and I’m lazy.

So I stole this js class that does basically what I want. Just replace the following snippit of code

map.getPane(1).appendChild(div);

with this one

map.getPane(Some higher number, like 7).appendChild(div);

and you’re good to go.

To our loyal blog readers – this isn’t quite ready for production, but I wanted to explore BART’s new open data feed and do something fun.

Comments, thoughts, appreciated. A few known issues:

We’re still working on getting the real time feed up. Soon.

The design isn’t great. We’ll be rolling out new ways to visualize the data soon, and include an extra layer showing stations.