You are here: > Home > How to Draw Cycle/Other Routes on a Google Map, and Show on WordPress Webpage

Make a Google route map to display on a Wordpress page/post:

1. Draw the route (using Cheshire Cycleway's simplified digitiser)

2. Add the Google map/route to a Wordpress site

1. Draw the route on a Google map:

Use these instructions to work with the digitizer map beneath the text.
  1. Select the 'HTML5' option
  2. Use the map controls (top left corner of map) to zoom in and out as required
  3. Find the part of the world to focus on, and then zoom in to the area required.
  4. Click on the map to start the line, then click along the route at intervals. Code will build up in the panel to the right of the map.
  5. NB it's easy to accidentally clear (delete) all your work, so if drawing a long route, copy/paste the code at intervals to Notepad or similar
  6. Once you've completed the route, click in the panel to highlight all the code. Copy, paste and save as a file with .html extension (eg in Notepad).
  7. Keep this .html file open
  8. Clear the digitiser map of lines using the 'Clear Map' button
  9. Click on the digitiser map once to place a marker where you want the centre of you map to be.
  10. Select the 'polyline co-ordinates code block' option
  11. Copy the co-ordinates from the side panel. (Eg: 53.21137858470816, -2.2249245643615723).
  12. In the .html file, find 'center: new google.maps.LatLng' and replace the exisiting co-ordinates with those copied, and save the file.
  13. In the .html file, find and edit zoom level, line attributes (trokeColor, strokeOpacity, strokeWeight) and map size (width/height etc) as required
  14. Test the .html file in a browser

Draw mode:

HTML5 page and polyLine co-ordinates code block

PolyLine co-ordinates code block   

Return to top

2. Displaying a map on Wordpress:

These instructions enable you to display a Google map on Wordpress without the use of plugins, which take up extra resources and loading time. Each map can be displayed many times throughout a Wordpress site. No modification to Wordpress is required and you're in control.

However, if the following is too complicated for you, there are map plugins available, including one at WPGMappity: Google Maps for WordPress.

  1. From the tested .html file you made of your map and line(s), copy the code between //START map code and //END map code
  2. Save this code with a .js extension in a Notepad text file.
  3. Open the Wordpress page/post for the map
  4. Select 'upload media'
  5. Select your .js file and insert into page/post.
  6. Remove the URL linking code, leaving only the path to the .js file (ie the section between the quote marks)
  7. Copy the code below and paste it into the same Wordpress page/post.
  8. Replace www.mysite path with your .js file path.
  9. Job done. Update page/post and view.

Note: This Google mapping uses V3 of the API that runs in HTML5 webpages.

Return to top

Our other sites are: Scaresbrooks' Web Services, Congleton Cycling, Congleton's Future, Gardening Masterclass,