Like all good customers, their patience on the two months timeframe i had given them to get Fiji’s map up and running ran out before the deadline  and last week I promised them I’ll show them at least something within a week.  And of course I had no clue how I was going to keep that promise.

I tried my hand on all sorts of things, I tried to configure and run our own map server to spit our tiles for Fiji,  I tried overlaying Fiji’s map data (which the client provided as shapefiles and it only covered a part of Fiji) on google map, I used good-old Firebug to debug OpenGTS’s
tracking website to see how they did their tracking using Open Street Map.

I had two plans.
Plan A: whatever it takes get the fiji’s map to load inside google map so I can use the existing javascript codebase that relies on google’s api.
Plan B: Use OSM for Fiji and google for rest,  and rewrite javascript code and use OpenLayer  javascript  library as the main library to allow users to switch ebtween providers easily.

Since Plan A is less painful, I tried to find ways to accomplish it. And Plan A  indeed turned out to be extremely painless if there’s such a thing.

I won’t go detail out all the things that failed, but I’ll definitely detail out what worked.

So, to all my fellow colleagues, cursing themselves in their little office cubicle, tearing their hair our trying to integrate OSM in google map,
here’s the solution:

We’ll create a new map type and point google to OSM ’s tile provider to get map tiles from OSM instead of fetching them from google’s servers.

Firstly, We’ll create a new GTileLayer for osm.

var osmTileLayer= new GTileLayer(new GCopyrightCollection(”"),1,17);
osmLayer.myLayers=’osm’;
osmLayer.myFormat=’image/jpeg’;

This is where we define a custom function for fetchng tiles from OSM map server.
This function will be user by google to fetch tiles from OSM everytime there’s request for tiles.

osmLayer.getTileUrl=function(a,b,c) {

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

}

Then we create a map type and add it to our good old google map.

var osmLayer=[osmTileLayer];
var OSMMap = new GMapType(osmLayer, G_SATELLITE_MAP.getProjection(), “OSM”, G_SATELLITE_MAP);
map.addMapType(OSMMap );

And that’s it !!
That’s all it takes to add Open Street Map as a new map type in google map.

here’s the complete code:
————————————————

var osmTileLayer= new GTileLayer(new GCopyrightCollection(”"),1,17);
osmLayer.myLayers=’osm’;
osmLayer.myFormat=’image/jpeg’;
osmLayer.getTileUrl=function(a,b,c) {

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

}

var osmLayer=[osmTileLayer];
var OSMMap = new GMapType(osmLayer, G_SATELLITE_MAP.getProjection(), “OSM”, G_SATELLITE_MAP);
map.addMapType(OSMMap );

—————————————————–

and here’s the final result: