Google Maps Street Marking

Question

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

In the Google Maps API, you can create markers and polygons that span specific areas.

Is there a way to somehow designate different streets?

Answer 1

It sounds as if you are interested in showing some specific coloring of applications for displaying Google maps (and not traffic maps).

If so, then you should check for custom overlays. You can create your own transparent background overlays (with your color streets), map them to Google map tiles, and then lay them on the map. You can find a description of this material in the Maps API Reference - Overlays .

I was really interested in trying this, and this question can be a good excuse. I will let you know how I am going.

Edit: Well, I tried this, and it was pretty simple . You just need to capture tile images when loading the Google map page (for the area you want to overlay). Make sure you keep track of the source URLs because they have the x, y coordinates that you will need to write your tile overlay method.

Edit the tiles with color roads, then upload them to your web server. Add the following code to use the overlay on a 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 eating NY plates:

with x = 38598 and y = 49259 with a zoom level of 17.

Answer 2

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

Check out these tutorials

And if you want to get the coordinates (latitude, longitude) of certain streets, you can take a look at the source code on this page

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

Answer 3

Have you considered using OpenStreeMaps ?

Answer 4

Try the code used to display traffic overlays on a regular Google Maps site.

Edit: I just looked at the code and it seems that even Google decided that it was easier to implement this by simply creating traffic lines on the server and pulling them out as transparent PNG overlays.

Answer 5

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

Is this what you were looking for?