Marking streets in Google Maps

Question

I want to create an overlay on top of Google Maps that displays different streets in different colors.

In the Google Maps API it is possible to create markers and polygons that cover certain areas.

Is there a way to somehow mark different streets?

Answer 1

It sounds to me like you are interested in showing some application specific coloring for your Google maps display (rather than traffic maps).

If so , then you should check out custom overlays. You can create your own transparent background overlay tiles (with your colored streets), match them up with the Google maps tiles and then overlay them on the map. You can find a description of this stuff in the Maps API reference - Overlays.

I have actually been interested in trying this out, and this question might be a good excuse. I'll let you know how I go.

Edit: Ok, I tried this and it was pretty straightforward. You just need to grab the tiles images when the google maps page load (for the area you would like to overlay). Make sure you keep track of the origional urls, because these have the x,y coordinates that you will need to write your tile overlay method.

Edit the tiles with your colored roads then upload them to your web server. Add the following code to use your overlay on the regular map:

var myCopyright = new GCopyrightCollection("© ");
myCopyright.addCopyright(new GCopyright('Demo',
              new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)),
                0,'©2007 Google'));

// Create the tile layer overlay and 
// implement the three abstract methods                 
var tilelayer = new GTileLayer(myCopyright);

// properties of the tile I based my tile on
// v=w2.97&hl=en&x=38598&s=&y=49259&z=17&s=Galil.png
tilelayer.getTileUrl = function(point,  zoom) { 
    if (zoom == 17 && point.x == 38598 && point.y == 49259)
        return "../pics/times_square.png"; 
};

tilelayer.isPng = function() { return true;};
tilelayer.getOpacity = function() { return 1.0; }

var myTileLayer = new GTileLayerOverlay(tilelayer);
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(40.75740, -73.98590), 17);
map.addOverlay(myTileLayer)

This code overlays my Thing eats NY tile:

at x = 38598 and y = 49259 at zoom level 17.