Displaying map from Open Street Map (OSM) inside google map api

In many countries google’s map data is inadequate; it lacks street level data in many countries.

In these cases Open Street Map is a good solution. Most of the applications written using google map api use google map data for displaying map. In this cases one should find a solution to integrate OSM inside google map api.

After some RnD on google map api and OSM I found out a solution to this. Google map api has a nice provision to add custom map types. And I used this feature to implement the solution. I added a custom map type in my google map and fetch the desired tiles from osm server. Here is the JavaScript code snippet:




var map = new GMap(document.getElementById(“map”));

map.addControl(new GScaleControl());

map.addControl(new GLargeMapControl());

map.addControl(new GMapTypeControl());

//Custom function for fetchng tiles from OSM server

CustomGetTileUrl=function(a,b){

return ‘http://a.tile.openstreetmap.org/’+b+’/’+a.x+’/’+a.y+’.png’;

}

var copyright = new GCopyright(1,

new GLatLngBounds(new GLatLng(53.8136257,-3.0981445),

new GLatLng(53.8654855,-2.9663944) ),

17, “”);

var copyrightCollection = new GCopyrightCollection(”);

copyrightCollection.addCopyright(copyright);

var tilelayers = [new GTileLayer(copyrightCollection,1,17)];

tilelayers[0].getTileUrl = CustomGetTileUrl;

var osmmap = new GMapType(tilelayers, G_SATELLITE_MAP.getProjection(), “O.S.M.”);

map.addMapType(osmmap);

map.setCenter(new GLatLng(34.6891,33.0182), 14, osmmap);

This will create an extra map type labeled “O. S.M.” besides the standard map types of google map api.