A jQuery/html5/php Code Sample

Below is the Google Maps Street View for Frederick MD. Use the camera rotation slider to pan the camera left and right. After rotating the image a bit, click the button to add a message to it. There's a couple different messages that appear randomly on each click.

The files for this sample are: this html/javascript file (view source), a short php controller-ish script (server_side.php), and a php class for adding the message to the image (imageText.class.php). You can view the demo at http://qorg.org/googlestreetviewsample/client_side.html.

To keep things simple, I'm using an HTML5 slider control, rather than a jQuery slider. It should work in modern verions of Chrome, Safari and Opera. IE and Firefox users can type a number between 1 and 360 and then tab out to change camera rotation. One final caveat: this is sample code; for brevity some error handling, magic-number hiding, etc has been left out.

UI office building
Valid HTML5