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).

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

Firefox 3.6 beta was released today. It added support for “Orientation” events in web content. This javascript event can use a devices built in accelerometers to detect the orientation and update accordingly.

Since our company name is based on a non-standard HTML tag that makes text Blink I thought it would be fitting to apply the orientation event to our entire site. To view, you need a laptop with an accelerometer (a newer macbook pro or Thinkpad) and to install and run Firefox 3.6.

Check it out some demos:

• A level Web App
• Accelerometer + Canvas Tag Demo
• Rotating Video & Other elements
• Rotating Firefox Logo
• View some code examples

In case you don’t have that, I made a video of the fun effects you are missing out on:

It turns out that if you actually have orientation events enabled, this embedded youtube video will disappear as it doesn’t play nice with embedded youtube videos. However, if you are seeing this effect live, then you don’t need to see the video.

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.