This post is an update of my earlier instructions for using Google's Chart API to make a map of your travels. Google have updated their API and the maps are now more flexible, so it was worth taking a few minutes to redo my own map.
I started off by making a map of the world, with pink for the colours I've visited, and blue for those that are high on my hit-list:
The Google Charts API works by allowing you to set some parameters on a URL, which you can then use within an HTML <img> tag to display your custom image. Here's the full code for that world map image:
http://chart.apis.google.com/chart
?cht=map:fixed=-65,-170,72,-170
&chs=600x330
&chf=bg,s,ffffcc
&chco=cccccc|cc0066|cc0066|cc0066|cc0066|cc0066|cc0066|cc0066|cc0066|cc0066|cc0066|cc0066|cc0066|cc0066|cc0066|cc0066|cc0066|cc0066|cc0066|cc0066|cc0066|cc0066|cc0066|cc0066|cc0066|cc0066|0066cc
&chld=AT|BE|CA|CH|CN|CU|DE|DK|EE|ES|FI|FO|FR|GB|GG|GI|GL|IE|IS|IT|MN|RU|SE|US|JP|IN|AU|BR|ET|GR|NO|NZ|NL
" />
Let's break that down into steps:
- Copy the whole of the code above into your page.
- Make a list of all the countries you want to display, and find their two-letter country codes.
- Write these into a pipe-separated list like this
AT|BE|CA|CH.....
You don't have to put them in alphabetical order, I just find it neater that way. A pipe, for those of you who aren't technically minded, is the name for that strange upright symbol. - Make a copy of the whole list, then on your copy, go through replacing each country code with the hex code for the colour you want that country to appear in:
cc0066|cc0066|cc0066|cc0066|...
(Google for hex colour codes if you're not familiar with these - you should find plenty of charts from which you can just copy-and-paste the numbers.) - Copy the code above into your page. Replace my country list with the list you just created, and my colour list with your own.
- At the beginning of your list of colour codes, add one more colour code, which is the colour you want to use for the countries which aren't highlighted. I've used a light grey, cccccc.
- Where I have ffffcc on the fourth line, replace this with the background colour you want for your map.
- You can use the numbers on the second line to change the edges of the map: they're latitude and longitude. Similarly, you can use the third line to change the size of the map. You can change these two sets of figures independently, but doing so may have some strange effects, so a bit of trial and error is required.
- Remove all the line breaks and then save/preview your page. You should see your own map displayed.
I also decided to do a zoomed-in map of Europe:
And another for the US states:
See how you can also colour states/regions separately, for example US-NY highlights New York state. I haven't been to many states yet!
Visit Google's help page to find out more - there are extra features like adding labels and titles that I haven't investigated.









































