This demo uses Google Spreadsheets as a data store for users to pin photos on a map with only client side java script - no PHP, no MySQL. You can read about a similar demo that uses Google AppEngine for persistence here.
Two spreadsheets are used - one for the photos and one for comments on the photos. The spreadsheet data is read using JSON format Spreadsheet feeds. Updates are made using HTML forms derived from the markup at photo form and comment form (the Latitude, Longitude fields etc. have been converted to 'hidden').Forms entry to Google spreadsheets only supports the ability to add one row; update and delete are not available. To work around this we can:
- Use a javascript associative array at load time to find the most recent entry for a photo URL so discarding earlier pinnings of a photo with the same url.
- Use a 'deleted' column in the spreadsheet to mark photos that have been deleted.
Currently the demo does not use any form of user authentication. Any user can pin, repin and unpin any photo. Sadly, the javascript version of Google's AuthSub does not provide for basic Google Logon and nickname retrieval. The Google AppEngine Users API provides just such a Logon.
More interesting features:
- The unwanted 'Thankyou' page presented after submitting a Spreadsheet form is redirected to a 1x1 pixel iFrame and entirely hidden away.
- A dynamic script tag is used to load new photos so that their original pixel width and height can be obtained. These are used to preserve aspect ratio when the photos are scaled for thumbnails and InfoWindow contents.
- A javascript associative array is used to select a direction icon from a direction string.
- You can use photo URL's copied directly from images displayed online by Google Picassa.
Here is the demo itself.