Creating a User-Contributed Map: Look, Ma - No server side scripts!

Posted by Keir Clarke, Virtual Tourism Blog Author and Google Maps Mania Blog Contributor

Pamela Fox wrote a wonderful tutorial in November called Creating a User-Contributed Map with PHP and Google Spreadsheets. However if you are like me, the thought of having to tackle server-side scripting sends you running for the hills. Fortunately, the recent release of forms for Google Spreadsheets means it is now possible (with just a tiny bit of hacking and wizardry) to create a user contributed map without any server-side scripting and with the added bonus of Google hosting the data for you.

1. The first step is to create a form for Google Spreadsheets at this page.

   The information that we need in order to add a contributor to our map is their name, latitude, and longitude. Of course, if you want more information on your map, you can always add more fields to the form later.

   • The first question we will ask is ‘What is your name?’. Type this into the ‘Question Title’ box. The default question type is ‘text’ - leave this as it is. After you have completed the ‘Question Title’ press ‘save’.
   • Now add the second question by clicking ‘+ Add a question’ and this time type ‘Latitude’ in the Question Title box. Again leave the question type as 'text' and press ‘save’ again.
   • Add one more question with ‘Longitude’ as the ‘Question Title’.

2. The second step (and the only one that requires some coding) is to hack the generated spreadsheet form so that instead of having to type in a latitude and longitude manually, our users can just click on a map to show where they live. To do this, we create a map and then assign an event listener for the map 'click' event that writes the values of the clicked coordinate into the form input fields. The code that accomplishes that is shown below:

   var map = new GMap2(document.getElementById("map_canvas"));
   map.setCenter(new GLatLng(37.4419, -122.1419), 13);
   map.addControl(new GSmallMapControl());
   map.addControl(new GMapTypeControl());
   
   GEvent.addListener(map, 'click', function(overlay, latlng) {
     var LatLngStr = "Lat = " + latlng.lat() + ", Long = " + latlng.lng();
     map.openInfoWindow(latlng, LatLngStr);
     document.getElementById("latbox").value = latlng.lat();
     document.getElementById("lonbox").value = latlng.lng();
   });
   

   The full HTML for the form and map is here. This page extracts the latitude and longitude when a user clicks on the map and automatically fills in the input boxes for latitude and longitude in the spreadsheet form, and also lets the user fill in their name. The important things to remember about modifying the generated spreadsheet form is that the form field names remain the same (e.g. the name for the latitude input is 'single:2'), and that the form action remains the same (e.g. 'http://spreadsheets.google.com/formResponse?key=pHxwMuyQhRdSwN9QcKaqWVA').

   Now that you understand how the simple map-based form works, feel free to hack it further. Here's an example using the same form that integrates the GClientGeocoder to let users type in an address and then stores the resulting coordinate in hidden input fields.

3. Once you've successfully modified the form, all you need to do is use the Spreadsheet Map wizard to create your user-contributed map.

   The wizard will do all the work of creating your map and generating the code, and give you something like the map embedded below. You could also try out generating KML from the spreadsheet with the techniques from the Spreadsheets Mapper tool.