Google Maps JavaScript API v3 Demo

I was honored to speak at the Google Technology User Group last night.  To combine a love of JavaScript, a very powerful tool, and an audience of enthusiastic fans is an incredible joy.

The topic was Google Maps, and specifically the Google Maps JavaScript API version 3.  v3 simplifies and streamlines the api in some very significant ways over v 2.  Most notably, you no longer need an API key, you only need to include a script tag.  That is awesome!

We started from a wonderfully simple “hello world” map, built up through creating Markers and pop-ups (called InfoWindows), worked through geolocation (address to Lat/Lng) and reverse geolocation (Lat/Lng to address), using the user’s location (browser permitting), and handling map events.  The crescendo of our activity was events.html:  When the user clicked the map, we created a marker and sidebar content.  Clicking either the marker or the sidebar content opened the InfoWindow and changed the sidebar’s style.  Both the pop-up InfoWindow and the sidebar content included a geolocated address.  Dragging the marker would adjust the address in the pop-up and sidebar.  An [X] button in the sidebar could show and hide the points.  It was truly awesome!  All the code we explored is available here.  There were no slides as everything was a live demo from the code.  The bottom few items on the index page include links to helpful resources, including the official Google Maps Javascript API docs found here.