Feb 25, 2014

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: [
  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/