Google Map API 3 with OSM overlay

Question

I'm using GeoXml3 to parse XML files in Google Map and would like to add OSM as custom maptype. I fiddled with this example but it hides completely the original Google layers.

I've found a couple of other examples but unfortunately all of them are using the V2 API.

Answer 1

Here is a working example. I based this off of your pastebin code and this example in Google's doc.

Your code was missing the maxZoom parameter in the mapTypeOptions object; which is a required parameter. See:

Google Doc (under MapType interface header)

OSM Doc, under 'Example - Using Google Maps API v3 setting OSM as a base map layer' header:

Note that you need to set maxZoom in the ImageMapType for it to work as a base layer.

Here is the js code:

var osmMapTypeOptions = {
getTileUrl: function(coord, zoom) {
    return "http://tile.openstreetmap.org/" +
    zoom + "/" + coord.x + "/" + coord.y + ".png";
},
    tileSize: new google.maps.Size(256, 256),
    isPng: true,
    maxZoom: 19,
    minZoom: 0,
    name: "OSM"
};

var osmMapType = new google.maps.ImageMapType(osmMapTypeOptions); 
var map;

function initialize(){

var latlng = new google.maps.LatLng(57, 21);
var mapOpts = {
    zoom: 3,
    center: latlng,
    panControl: true,
    scaleControl: true,
    mapTypeControlOptions: {
        mapTypeIds: ['OSM',google.maps.MapTypeId.ROADMAP],
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    zoomControl: true,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL
    },                  
};

map = new google.maps.Map(document.getElementById("map"), mapOpts);
map.mapTypes.set('OSM', osmMapType);
map.setMapTypeId('OSM');