I can't answer programming questions, but these specialists can - ask Tech Support now.
How to put customised Google maps on a website/Blogger blog - easily
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:
Essential stages in common for website or blog maps:
What you need first to put Google maps on your blog or website.
How to get a Google Application Programming Interface (API) key.
Final stage to put a map on a website:
How to put a map and line on a website.(modified Sep 08)
Stages needed to put a map on a blog:
3 steps to change the blog template file on Blogger.
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.(modified Sep 08)
Add your map to your blog posting.
*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 itself 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.
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.
*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:
<!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.
<!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.
*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 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.)
*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.
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.
*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.
<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, digitiser, digitizer, routemaker
We can't answer programming questions, but these specialists can - ask Tech Support now.
Click here to compare Eco Web Hosting packages. Get 20% off first year's hosting with this code: ECOHOSTING
This web site is hosted on a service using renewable energy.Visit 1&1 green hosting
Comments
1 Danilo 14 May 2009 5.13.33
2 Chandan 18 May 2009 15.13.04
Really an easy to go and good tutorial on putting maps on blogspot and will be a good help for me as well as beginners in google maps ,
Hope you come up with other similar posts on creating custom maps.
3 software developer 23 Oct 2009 17.19.16
Hey, that was interesting,
This is great advice which i can use to embed a google map to my page,
Thanks for writing about it
4 kaizen print 03 Dec 2009 6.14.41
Putting maps on blogspot is a good way of tutorial in learning specially me as beginner on how to put map on it.


you Rock Men!