Instagram Email me!

Monday, 30 August 2010

Make Your Own Travel Map



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:

<img src="
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:
  1. Copy the whole of the code above into your page.
  2. Make a list of all the countries you want to display, and find their two-letter country codes.
  3. 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.
  4. 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.)
  5. Copy the code above into your page. Replace my country list with the list you just created, and my colour list with your own.
  6. 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.
  7. Where I have ffffcc on the fourth line, replace this with the background colour you want for your map.
  8. 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.
  9. 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.

23 comments:

Kasia said...

There's far too big a gap in Central Europe!

Kel said...

That would be a great projects for my girls. Since I lived in Europe for 4 years, I've been a lot more places than them, but we could start from when they were born. I see you haven't visited Virginia, Florida, or DC yet. Definitely worth checking out! ;)

Sarah S. said...

This is fun, and yay for Illinois being on your high hit list :)

Alice Braga said...

What a great visual diary/vision map. What part of Brazil are you planning to visit? My family's from there, and I lived in Sao Paulo for a couple of years. I also visited Recife and Rio when I was a wee lass.

Bibliomama said...

Really cool -- for you, not for us. Mine would be pretty boring, and my husband's (he's always abandoning us to fly to Asia, Europe and wherever the hell for work) would just make me angry every time I saw it. :)

Emma said...

This is super awesome but I'm not sure I'm clever enough to figure out the code and make it all work!! California is by far my favourite State!!

Ruth said...

this is super fun!!

Mama Hen said...

That is so cool! Very neat! I just thought you might want to try a different brwoser so you can see the categories. There was one other blogger who said she could not see thenm either and that when she switched browsers she could see them. Have a great night!

Mama Hen

Rachel Cotterill said...

Kel ~ I have been to DC but I think it's too small to show up! But you've reminded me I missed off Maryland, thanks :)

JadeLD said...

This is great! I use google maps at the moment but I always thought yours looked much better. I'll give it a try soon.
Jade

ScoMan said...

I'm not going to do this because my map would look sad.

It's good to see Australia high on your hit list though.

Mademoiselle Poirot said...

I do love the idea in principle... if it didn't make me feel like a "travel underachiever"... note to self: buy less shoes & travel more ;-) Have a great week (including a rest just reading on the sofa) Love from London x

nmaha said...

What a fun family project.

MJ said...

Wow, you've been to a lot of places! I have to say, I'm pretty damn jealous - I don't have the funds to travel at the moment but one day I hope to have a map as full as yours!

Writing Without Periods! said...

Love it. Off to try.
Mary

April said...

Cool! I'll have to check it out. Stopping by from SITS

Jen said...

Wow, you're pretty well-traveled! That's awesome. :)

A Cuban In London said...

That's a very good use of technology. I'm mightily impressed by all the countries you've visited. I loved your Greenland's travelogues.

Greetings from London.

lakeviewer said...

This is really cool stuff!

alessandra said...

Wow, you're such a traveler!

LambAround said...

No New Mexico?? The International Balloon Fiesta is coming up. Hint, hint :)

amymwalsh said...

This is brilliant! I may need to look into this... haven't traveled much (yet) but perhaps this could give me a good excuse?!

http://amyslens.wordpress.com

Elizabeth Braun said...

Ok, I've finally up-dated my world map, but I can't fathom the zoomed in Europe one. Can you give me your code so I can adapt it, pls??? I'm not as au fait with programming-ey things as you....

Post a Comment

Thanks for dropping in! I'd love to hear what you have to say, and if you leave a URL, I'll be round to visit you soon. (Comment moderation is on because the spam has become overwhelming!)

Related Posts Plugin for WordPress, Blogger...