Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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.

share|improve this question
    
Could you please provide a sample page of what you want (even it uses google v2 api)? –  simo Sep 22 '11 at 10:23
    
A V2 more complex example –  elbatron Sep 22 '11 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 '11 at 10:49
    
Ok, maybe your question is a duplicate of gis.stackexchange.com/questions/14597/… –  simo Sep 22 '11 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 '11 at 12:20

1 Answer 1

up vote 6 down vote accepted

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');
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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