I've successfully embedded a Google Maps API v3 map on my site, and added OpenStreetMaps (OSM) as the base layer. Is it possible to use Google's tiles as the base layer, and then overlay street data on top of that, rather than the entire OSM layer?

<script type="text/javascript" charset="utf-8">


        var osmMapType = 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: "OpenStreetMap layer",
            name: "OpenStreetMap"

            action: 'init',
                  center: [22.49156846196823, 89.75802349999992],
                  mapTypeId: google.maps.MapTypeId.ROADMAP,//google.maps.MapTypeId.OSM,
                  mapTypeControl: true,
                  mapTypeControlOptions: {
                    style: google.maps.MapTypeControlStyle.DEFAULT
                  navigationControl: true,
                  scrollwheel: true,
                  streetViewControl: true

1 Answer 1


It's possible but you have to render the custom OSM tiles yourself.

OSM has a generate_tiles python script that renders tiles based on a bounding box setting and a set of XML files (osm.xml includes the others) that control which features get drawn by mapnik on the map tiles.

If you edit the style files to only draw the road network layers you can generate your own set of transparent tiles and display them over any base map.

generate_tiles is a wrapper over mapnik's python bindings that reads data from a postgis/postgresql database so you will have to import OSM data for the region of interest using osm2pgsql.


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