Acceso a OpenStreetMap desde Google Maps API V3

En un artículo anterior explicábamos como acceder a los mapas de Google desde el entorno OpenLayers. En esta ocasión vamos a explicar como acceder a los mapas de OpenStreetMap desde el entorno de la API V3 de Google Maps.
La API de Google permite definir tipos de mapas personalizados (Custom Map Types). Para ello se dispone de la clase google.maps.ImageMapType. Las instancias de estas clase definen un interface para mapas externos. El objeto ImageMapType presenta las siguientes propiedades:

• alt : (String) La cadena que se mostrará al sobrevolar el control MapTypeControl
• getTileUrl : Function La función debe tener la siguiente estructura: Function(Point, number) → String . Recibe como parámetros las coordenadas el (x,y) y el nivel de zoom de la loseta de imagen solicitada (hemos traducido 'graphic tile' por 'loseta de la imagen'). Devuelve una cadena con la URL a la loseta pedida.
• IsPng : Boolean Indica si la imagen es en formato .png
• maxZoom, minZoom: number Los niveles máximos y mínimos del zoom
• name : String El nombre que se mostrará en el control MapTypeControl
• opacity : number Número entre 0 (cero) y 1 donde 0 (cero) es transparente y 1 opaco
• tileSize : Size Tamaño de las losetas

En nuestro caso vamos a crear un objeto ImageMapType que define las propiedades de los mapas de OpenStreetMap. Las opciones se pasan en el constructor de la siguiente forma:

var osmMapnik = 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),
isPng: true,
alt: "Mapnik",
name: "Mapnik"
});

Podemos elegir la capa OpenStreetMap que queremos mostrar: Mapnik, Osmarender o CycleMap. Para ello hay que variar la URL en la llamada. Las URL son:

• Mapnik : http://tile.openstreetmap.org/
• Osmarender : http://tah.openstreetmap.org/Tiles/tile/
• CycleMap : http://tile.opencyclemap.org/cycle/

El tamaño de las losetas es 256x256 pixel en los tres casos.

Una vez definido el tipo de mapa pesonalizado hay que registrarle en el objeto google.maps.Map, asignandole un 'id'. En nuestro caso le hemos asignado el id='MAPNIK':

map.mapTypes.set('MAPNIK',osmMapnik);

Hemos creado un ejemplo en el que mostramos las tres capas de OpenStreetMap y las cuatro capas de Google. El desarrollo completo del ejemplo lo puedes ver en el siguiente enlace:

OSMAccessFromGoogle.html

Publicado por Santiago Higuera
Blog Descartes