Make a Google route map to display on a Wordpress page/post:
1. Draw the route on a Google map:
- Select the 'HTML5' option
- Use the map controls (top left corner of map) to zoom in and out as required
- Find the part of the world to focus on, and then zoom in to the area required.
- 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.
- 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
- 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).
- Keep this .html file open
- Clear the digitiser map of lines using the 'Clear Map' button
- Click on the digitiser map once to place a marker where you want the centre of you map to be.
- Select the 'polyline co-ordinates code block' option
- Copy the co-ordinates from the side panel. (Eg: 53.21137858470816, -2.2249245643615723).
- In the .html file, find 'center: new google.maps.LatLng' and replace the exisiting co-ordinates with those copied, and save the file.
- In the .html file, find and edit zoom level, line attributes (trokeColor, strokeOpacity, strokeWeight) and map size (width/height etc) as required
- Test the .html file in a browser
HTML5 page and polyLine co-ordinates code block
PolyLine co-ordinates code block
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.
- From the tested .html file you made of your map and line(s), copy the code between //START map code and //END map code
- Save this code with a .js extension in a Notepad text file.
- Open the Wordpress page/post for the map
- Select 'upload media'
- Select your .js file and insert into page/post.
- Remove the URL linking code, leaving only the path to the .js file (ie the section between the quote marks)
- Copy the code below and paste it into the same Wordpress page/post.
- Replace www.mysite path with your .js file path.
- Job done. Update page/post and view.
Note: This Google mapping uses V3 of the API that runs in HTML5 webpages.