OpenStreetMaps layer in Google Maps API V3

Adding an OSM layer in Google Maps is very easy, since the V3 API provides a functionality for adding custom layers (even WMS!).

First, you need to define custom map settings, to include your layer. It's good to change the layer chooser to 'dropdown' too.

map = new google.maps.Map(document.getElementById("gmap_canvas"), {
 scaleControl: true,
 mapTypeId: google.maps.MapTypeId.ROADMAP,
 mapTypeControlOptions: {
  mapTypeIds: [
   "OSM",
   google.maps.MapTypeId.ROADMAP, 
   google.maps.MapTypeId.SATELLITE, 
   google.maps.MapTypeId.HYBRID, 
   google.maps.MapTypeId.TERRAIN
  ],
  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
 }
});

Next, you define your OSM layer like so:

map.mapTypes.set("OSM", new google.maps.ImageMapType({
 getTileUrl: function(coord, zoom) {
  return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
 },
 tileSize: new google.maps.Size(256, 256),
 name: "OSM",
 maxZoom: 18
}));

And there you go. You can check the demo out at: http://poi.kafol.net/