Sihan’s Blog

Tech Talks

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

with 6 comments

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.

Written by sihan

January 6, 2009 at 10:34 PM

6 Responses

Subscribe to comments with RSS.

  1. Hi…

    The code doesn’t seems to be running in my machine
    Can you provide more details on the same

    Viral

    March 27, 2009 at 3:51 PM

  2. Thanks… works great 🙂

    Mikey

    July 13, 2009 at 4:47 PM

  3. Hi,
    thanks for the code, I managed to get the “OSM” tab to google map window, but no map is shown (other tabs work just fine). It is probably something really simple, but as I’m not much of a coder. Do you think you would be so kind and help me?
    Thanks

    Krystof

    September 1, 2009 at 4:11 PM

    • Hi Krystof
      Can you send please me the code snippet you are using? I think I would explain better if you show me the snippet
      Regards
      Sihan

      sihan

      September 13, 2009 at 12:42 AM

      • Sure,
        sorry it took me so long, at first, I thought you just deleted the post.. Sorry.
        Here it comes:
        <?php

        $latitude = $_GET["latitude"];
        $longtude = $_GET["longtude"];
        $image = $_GET["image"];

        echo <<<EOT

        Náhled na mapě

        //<![CDATA[
        window.onload = function(){
        load();

        }

        function load() {

        if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.addControl(new GOverviewMapControl());
        map.enableContinuousZoom();
        map.enableDoubleClickZoom();

        //OSM custom map
        CustomGetTileUrl=function(a,b){
        return "http://api.openstreetmap.org/’+b+’/'+a.x+’/'+a.y+’.png&quot;;
        };
        //var copyright = new GCopyright(1, new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)), 0, "");
        var copyright = new GCopyright(1,new GLatLngBounds(new GLatLng(53.8136257,-3.0981445), new GLatLng(53.8654855,-2.9663944) ),17, "");
        var copyrightCollection = new GCopyrightCollection('OSM');
        copyrightCollection.addCopyright(copyright);

        //var tilelayers = new Array();
        //tilelayers[0] = G_NORMAL_MAP.getTileLayers()[0];
        //tilelayers[1] = new GTileLayer(copyrightCollection, 11, 15);
        //tilelayers[1].getTileUrl = OSMGetTileUrl;

        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);
        //end OSM custom map

        map.setCenter(new GLatLng({$latitude},{$longtude}), 13, osmmap);
        //map.setCenter(new GLatLng({$latitude},{$longtude}), 13);
        var center = map.getCenter();
        var center_y = center.y
        var center_x = center.x
        GEvent.addListener(map, "mouseover", function(){
        map.showControls();
        });
        GEvent.addListener(map, "mouseout", function(){
        map.hideControls();
        });
        var infoTabs = [
        new GInfoWindowTab("Standort"," “)
        ];
        var marker = new GMarker(map.getCenter());
        map.addOverlay(marker);
        var windowOptions = {maxWidth: “95”};
        GEvent.addListener(marker, “click”, function() {
        marker.openInfoWindowTabsHtml(infoTabs,windowOptions);
        });
        }
        }

        //]]>

        EOT;

        ?>

        when I test it, I use the following address:

        Krystof

        December 9, 2009 at 4:59 PM

  4. This Is the corect code !

    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(47.15746,27.58691), 13, osmmap);

    Andrew

    September 16, 2009 at 12:32 PM


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: