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.

  • Could you please provide a sample page of what you want (even it uses google v2 api)?
    – simo
    Sep 22, 2011 at 10:23
  • A V2 more complex example
    – elbatron
    Sep 22, 2011 at 10:46
  • pastebin modified code from OSM wiki. It displays Google Map controls with OSM layer, but switching maptypes doesn't work.
    – elbatron
    Sep 22, 2011 at 10:49
  • Ok, maybe your question is a duplicate of gis.stackexchange.com/questions/14597/…
    – simo
    Sep 22, 2011 at 12:12
  • I've seen that post and the answer. I would like to use OSM a maptype and not just part of it (e.g road layer). I think my pastebin example is almost there...
    – elbatron
    Sep 22, 2011 at 12:20

1 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);
  • Is it possible to use another OSM format besides PNG? (e.g., XML, etc) Sep 28, 2019 at 6:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.