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 'deleted' column in the spreadsheet to mark photos that have been deleted.
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.
- You can use photo URL's copied directly from images displayed online by Google Picassa.
Here is the demo itself.