by Alec Scaresbrook (Jan 2008; updated Sep 08; Aug 09; Aug 10)

So many people have asked me how I put the cycle route maps on my blog and websites that I have written this additional page to explain the process. It's a jargon-lite tutorial and starter kit for those with no experience of using Google maps, with an example of map coding that you can edit yourself.

In fact there are two options for putting a map on a Blogger post - one is to embed the map code in the post itself, and the other is to keep all the map data in a separate computer file. I've tried both and decided that it's much easier to keep the map information in one separate file, especially if the map has lots of markers and lines on it. With data in a file that's external to your website or blog, it's easier to access and edit. And there's only one file to edit.

Just work your way through the instructions, step-by-step, and produce a map to be proud of.

My code (further on) enables you to do the following:

• Display many lines of different lengths, colours, widths and densities.
• Display many markers of different colours - when clicked on, each marker displays a fly-out information window.
• Size the map (width and height).
• Position the map centre.
• Set the magnification of the map.
• Use the same map on many webpages without duplication of files.
• Show map 'view' controls (zoom, arrow keys, hybrid, satellite, map, terrain).

NB The code displays a line on a map in Internet Explorer and Mozilla Firefox, but there are problems with the display when using Google Chrome. I have yet to address this.

NB Update Aug 09: I discovered a bug in my code that meant it failed XHMTL verification. I have now corrected this. Why bother? Verification of XHMTL code means a better, faster, more accessible website and may provide favourable ranking in Google search results.

NB Update Aug 10. The following relates to version 1 of Google's API - there is now version 2 available, and a partially complete version 3. I will look at these and amend the instructions to suit these newer versions when I find some time. However, version 1 is still available and if you can follow this tutorial, you may find it easy to switch to version 2 afterwards....

The tutorial covers:

*What you need first to put Google maps on your blog or website:

1. A Google account and a blog or a website.

2. Web space for holding the sample folders and files. (Why? The only files that can be uploaded to Blogger are image files. So the Javascript files (.js) that draw the map have to be located externally to blogspot.com)

Return to top

*How to get a Google Application Programming Interface (API) key:

It's a painless process, and all free. First, get a Google account (note: not possible with a hotmail address). Second, make a note of the URL (web address) of the blog or webpage where you want to display a Google map.

Example URLs:

Blogger

On Blogger, your blog's URL is http://myname.blogspot.com

(substitute your name for 'myname'). For example, ours is http://scaresbrooks.blogspot.com

Website

To display a map on a website (and any other pages that exist, perhaps in a sub folder), your site's URL is required. An example of one of ours is http://www.cheshirecycleway.co.uk

Note: you need a separate key code for each domain address used.

Next, go to Google Maps API . Sign in, then get the API key code for your URL. You will see your key in a box on one line. Copy this and save it somewhere.

The key code itself looks something like this:

Look at the block of code in the next box and copy the relevant part as shown here. Save this too.

The key code block looks something like this:

Return to top

Put a map on a website.

Go to the Cheshire Cycleway routemaker webpage (a Google map PolyLine digitiser) and choose the option ' XHTML page and PolyLine coordinates code block' . This will give you all the code you'll need to use with the API key you've already obtained.

Return to top

*3 steps to change the blog template file on Blogger:

1. Backup

Sign in to your blog > click on Dashboard

From Dashboard > Settings > Template > Edit HTML

You'll see a box of template HTML code. Before editing anything, save a copy of this template code so you have a backup to return to if your editing goes horribly wrong.

2. Edit HTML

2a.

Insert the following line of code and your API key code block towards the top of the template code:

xmlns:v='urn:schemas-microsoft-com:vml'

example from scaresbrooks.blogspot.com:

before editing:

after editing:

The single line of code has been inserted between the end of this line of code and the >:

xmlns:expr='http://www.google.com/2005/gml/expr' (insert new code here)>

Check that you only have one > at the end of the whole block of code before <head>, as shown below. Incorrectly placed > at the end of lines will cause lots of problems!

Note that the API key used in the example code block shown below is specific for our blog (scaresbrooks.blogspot.com) - you need to get your own as described above.

2b.

Find the following part of the template file, and replace <body> with this code:

<body onunload='GUnload()'>

before editing:

after editing:

3. Save the edited template file

Click on the 'save' button at the bottom of page.

Note: from now on, each time you go to the template file, this Google error message will appear: 'The Google Maps API key is for a different website'. This is true (because the template file is in a different place to that of your blog post) but it's not a problem, so click on 'OK' and continue.

Return to top

*Download the code for my example map:

The file to download is a zip file (congleton_routes.zip) containing the following:

A folder called 'markers' - this contains the marker images.

A file called markers.js

A file called congleton_routes.js

Download congleton_routes.zip and save to disk.

Once you have edited these files (how? see below for 'Edit example map data files'), upload the folder and files to the root of your web space.

Return to top

*Edit example map data files:

markers.js

Open the markers.js file in Notepad and edit the following line of code at the beginning of the file:

Change 'mydomain' to the address (root of your web space) of where you intend to put the example files.

congleton_routes.js

Open the congleton_routes.js file in Notepad and have a look at the coding and data for the map. This file will generate the Congleton Cycling Network map without any change to it. Set everything up as described above and try it out before you start changing the data in this file. This is the map you should see.

You can see that I've divided the file coding into four sections:

1. Javascript for the Google map (where you edit the map centre and level of zoom).

2. Available markers (a list of the different markers set up for use in the markers.js file).

3. Map marker overlays (contains blocks of code for each marker displayed on the map. The first code block is clearly labelled.)

4. Line overlays (contains blocks of code for each line drawn on the map. The first code block is clearly labelled.)

Return to top

*How to get the latitude and longitude for positioning the map centre and markers.

Go to http://mapki.com/getLonLat.php to get latitude and longitude for anywhere in the world.

Return to top

*How to get the latitude and longitude co-ordinates for creating lines.

Follow the instructions on the Cheshire Cycleway routemaker webpage (a Google map PolyLine digitiser), choosing the 'PolyLine coordinates code block' option.

When finished, select the code block you've created and copy it for use in the congleton_routes.js file. See 4 - Line overlays.

Return to top

*Add your map to your blog posting:

Sign-in to Blogger > Dashboard > New Post > Create Post

Choose the Edit HTML tab.

Write your posting.

Add the code (below) to display your map with your text. But first, make sure that the code has no hidden hard returns in it because Blogger will format the code as though it were a text paragraph - then it won't work. Also, change 'mydomain' to the address (i.e. root of your web space) of where you put the example files. Change the values for width and height to your specification.

Note: you cannot preview the map or see it in a draft post because drafts are located in a different system to that of your registered API key. You have to publish the post for real to see it.

Publish your post.

View your blog.

Return to top

*Congratulations!

Da, da! There you are, job done. And if you found all this helpful, perhaps you'd consider buying me a cuppa? 50p would be nice, or a bit more for a refill. Just click on the little PayPal button below:

Thanks!

Return to top

*Acknowledgements and further resources

It took me a lot of trial and error to fight my way through the fog of jargon on numerous websites and blogs to create and publish these cycle route maps. An especially useful website is Mike Williams' Google Maps API Tutorial. Also Google Maps API and the people contributing to the Google Maps API forum. If you're interested in embedding a map in a particular Blogger posting, try Ron Down Under's tutorial or Google help.

Return to top

Suggested bookmarking tags: blog, Blogger, Google map, technical, how to, tutorial, digitiser, digitizer, routemaker

Comments

  1 Danilo    14 May 2009 5.13.33

  2 Chandan    18 May 2009 15.13.04

  3 software developer    23 Oct 2009 17.19.16

  4 kaizen print    03 Dec 2009 6.14.41