Google Maps are an excellent way to show information - especially case studies. And now, you can create a map that updates from a simple spreadsheet, without even needing to know about AJAX or Javascript.
Here's an example of some information I downloaded in spreadsheet format, and had published in a webpage half an hour later. The markers on this map are members of a certain political grouping, courtesy of a file published by WikiLeaks.
Here's how to do it:
1) Start a new spreadsheet in Google Docs (create a login, if you don't already have one)
2) Create 4 columns (the minimum):
- the first for the title of the marker
- the second for the address
- the third for the information to go in the first tab
- the fourth for the information in the second tab
(The heading you use for the columns of the 2 tabs will be the title of each tab)
Additional Tip: You can use the =Concatenate function to string together information of different cells, as well as include HTML, for example:
If E2's contents are "Uncle Hester" and F2's are "Dunroamin Cottage", you could make this all one sentence, wrapped in a <h2> heading by:
=concatenate('<h2>',E2,' ',F2,'</h2>')
Anything other than cell numbers needs surrounding with quotation marks - between E2 and F2 we want a space, hence the '[space]' in the calculation above
3) Now it's time to publish the data, so that a Google Map can read the data:
- click the "Share" button in the top right hand corner
- choose "publish as a web page"
- select "Automatically republish when changes are made"
- under "Get a link to the published data" choose "Atom"
- copy the numbers in the link that it gives you
(the important bits you'll need are in red in this example - http://spreadsheets.google.com/feeds/list/
tAArQLUbx2_wKsxzOqyAAAA/
od4/public/basic)
4) Geocode the addresses. If you haven't got the geocodes - Google have a
Geocode Wizard that'll do it for you
Copy the Lat and Long data that the Geocode Wizard gives you into 2 new columns on your spreadsheet
5) Now - make the map... Again, Google have a
Tabbed Map Wizard that does all the hard work for you. Put in the info of your spreadsheet as required, play with the options, and the Wizard will create the necessary code for you
6) Sign up for a
Google Maps API key - put the following into the <head> of your web page:
<script src="http://maps.google.com/maps?file=api&v=2&key=YOUR-API-KEY-HERE" type="text/javascript"></script>
7) Change the opening <body> element to <body onLoad="load()" onUnload="GUnload()">
8) Copy the code from the wizard from the line with CDATA in it onwards, not including the final </script>
9) Paste into a blank .js file and save it - then link to this file, after your API key link in the <head> of your document
10) Copy the code from the top of the wizard, from <div style... down to the closing <div> tag 6 lines down, and paste the into the <body> of your document, where you want the map to appear
And you're done... Now, all you have to do is update the spreadsheet (including the Geocoding), and the webpage that you've created will automatically update
Labels: online-marketing, tutorial, web-design