Cheshire Cycleway

You are here: > Home > Sidetracking - insurance, security, mapping, health... > How to Draw Google Map Lines to Show Routes

How to Draw Google Map Lines to Show Routes

View or add comments on this page

Welcome to Cheshire Cycleway's simplified digitiser for showing a route on a Google map.

Select the XHTML option.
Use the map controls (top left corner of map) to zoom in and out as required.
Find the area of the world to concentrate on.
Click on the map to start drawing a line, then click along the route at intervals. Code will build up in the panel to the right of the map.
Once you've completed the route, click in the panel to highlight all the code for copying, pasting and saving as an HTML file.
Select the PolyLine option to add extra code blocks to this file, pasting it into the file on a new line anywhere between the labels '//START PolyLine code block' and '//END PolyLine code block'.
See tips for use below the map.

Draw mode:

XHTML page and polyLine co-ordinates code block

PolyLine co-ordinates code block

Click on the map to start drawing a line

Tips:

If the route you plan to draw has a lot of co-ordinates, chop the route into convenient sections. About 50 co-ordinates/section is easy to re-draw if you need to modify the route.

Label each line block using two back slashes // (JavaScript comments code) before the label.

Example: //Beginning of Bank St to the A50 junction

Don't forget, you can change the line colour, line weight and line opacity of each line block

The coding produced for your webpage will validate as a XHTML 1.0 Strict document. So any other text and coding that you add is best written using XHTML coding conventions. XHTML is required for the map to work correctly.