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.

Answer 2

It is possible to create markers and polygons in the Google Maps API. You need to create GPolygon and/or GPolyline objects

Have a look to these tutorials

And if you want to obtain the coordinate (latitude, longitude) of certain streets, you may have a look to the source code of this page

I am not sure to fully understand your question: do you want to mark some given streets ? in that case, a quick-and-dirty way could be to get the coordinates of all the addresses of the street and build a GPolygon according to them...

Answer 3

Have you concidered using OpenStreeMaps?

Answer 4

Try digging into the code used to show the traffic overlay on the normal Google Maps site.

Edit: I just looked at the code, and it appears that even Google decided it was easier to implement this by just generating the traffic lines on the server and pulling them down as transparent PNG overlays.

Answer 5

I just found this link, and I think this could interest you. It is a JavaScript package that provides functionality for displaying multiple routes on Google Maps.

Is it what you were looking for ??