Cheshire Cycleway
How to put customised Google maps on a website/Blogger blog - easily
by Alec Scaresbrook (Jan 2008)
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 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).
The tutorial covers:
What you need first to put Google maps on your blog or website.
How to get a Google Application Programming Interface (API) key.
3 steps to change the blog template file on Blogger.
3 steps to putting a map on a website.
Editing example map data files.
How to get the latitude and longitude for positioning the map centre and markers.
How to get the latitude and longitude co-ordinates for creating lines.
*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)
*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 looks something like this:
ABQIAAAAqlD-Bzwo0trckk-cerPomRTsRmROdlM9jVauVZfTuaM0
p0whhxSur-nn4xSxBtunEzmyvIzF513vSg
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:
<script src="http://maps.google.com/maps?file=api&v=2&
key=ABQIAAAAqlD-Bzwo0trckk-cerPomRTsRmROdlM9jVauVZfTuaM0
p0whhxSur-nn4xSxBtunEzmyvIzF513vSg" type="text/javascript"></script>
Tip: Make a record of all your API codes and other password information as soon as you create new accounts. You can get in a right muddle if you don't record everything carefully.
*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:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection'
xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
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.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:v='urn:schemas-microsoft-com:vml'>
<head>
<script src='http://maps.google.com/maps?file=api&v=2&
key=ABQIAAAAqlD-Bzwo0trckk-cerPomRQUcL5m-7C5F69ePHgkD4K4P
IxXPBQwHpY2eq6Q4JfE3MaUXsM6nyn9Jw' type='text/javascript'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
2b.
Find the following part of the template file, and replace <body> with this code:
<body onunload='GUnload()'>
before editing:
</head>
<body>
after editing:
</head>
<body onunload='GUnload()'>
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.
*3 steps to put a map on a website.
For those of you with a little more knowledge of websites:
1. Edit website file - document-type definition
Insert the following line of code in the document-type definition section:
xmlns:v='urn:schemas-microsoft-com:vml'
Also insert your API key code block between the <head> and </head> tags.
example from www.cheshirecycleway.co.uk:
before editing:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
after editing:
The single line of code has been inserted between the last line of code and the > before <head>:
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 the Cheshire Cycleway site - you need to get your own as described above.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<script src="http://maps.google.com/maps?file=api&v=2&
key=ABQIAAAAqlD-Bzwo0trckk-cerPomRTXL_lyxiMaDqV
b5tHx0dM1LGtuuBTXGN3iuo32rS_Q4xV_O2qMPktF7A" type="text/javascript"></script>
2. Edit website file - body tag
Find </head> and <body> in the header code. Replace <body> with this code:
<body onunload='GUnload()'>
before editing:
</head>
<body>
after editing:
</head>
<body onunload='GUnload()'>
3. Save
Don't forget to save your new version!
*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.
*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:
var mydomain = "http://www.mydomain.co.uk/markers/";
Change 'mydomain' to the address (root of your web space) of where you are going 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 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.)
*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.
*How to get the latitude and longitude co-ordinates for creating lines.
Go to Google Maps-API Application for Digitizing (GMAD).
This site is not as complicated as it first appears, as you only have to use a bit of it. Start by moving to the top of the page, to the map.
Go to the right of the map, find the list box that says 'recenter map' and choose the country you want from the drop-down menu. Then go to the map area and zoom in to the level required.
Next, in the area beneath the 'recenter map' box, click on a radio button to choose the colour of the tracing line, de-select 'Great circle', and click on the radio button for GMaps code.
Move the mouse pointer to the map. Click quickly on the left-hand mouse button on different points to draw a continuous line across the map (drag the mouse for straight sections). To move the position of the map, hold the left-hand mouse button down so the pointer changes to a hand - then move the hand across the screen. If you create unwanted lines and markers, click on the delete buttons at the top of the page.
As you trace a line, you'll see the code block build in the panel to the right of the map. When finished, select this code block and copy it for use in the congleton_routes.js file. See 4 - Line overlays.
Add the following code to the line code block:
map.addOverlay(gpline);
*Add your map to your blog posting or website:
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.
<div id="map" style="width:565px; height:450px;"></div><script type="text/javascript" src="http://www.mydomain.co.uk/markers.js"></script><script type="text/javascript" src="http://www.mydomain.co.uk/congleton_routes.js"></script>
Publish your post.
View your blog.
*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!
*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.
Suggested bookmarking tags: blog, Blogger, Google map, technical, how to, tutorial
News & views | Have your say | Our services & contact | Press releases
Also authors of: photos4art.co.uk, gardeningmasterclass.co.uk, gardenmakeover.eu, congletoncycling.co.uk and scaresbrooks.co.uk
Copyright © Alec & Val Scaresbrook. All rights reserved.
No part of this web site may be copied and reproduced in any electronic or printed medium for publication or distribution without prior written permission from the copyright holders.
For further information please contact us.
N.B. Products and services provided by any third party accessed from this web site are out of our control.
