Code Example: Google Maps Mashup
Date Posted: 1/17/2008 10:57:53 AM
Example Type: JavaScript

Introduction
MyVox + Google Maps = Voice Map                                                

Documentaion:

Voice Map is a quick demonstration piece we put together, showing how powerful voice can be when incorporated into maps. It incidentally also shows how little work it can be to incorporate the MyVox API functionality into an application: This whole app took one of us about two hours to put together.

If you haven't yet looked our Hello World application and explanation, give it a quick read first. Voice Map uses much of the same code as Hello World, just applying it differently to the map context. If you are serious about developing voice applications that include maps, you'll also eventually want to look at the Google Maps API docs.

Like Hello World, all of the code for the Voice Map is in the page itself, so you just have to view the page source to see it. We create the map, then set up a listener to check for clicks from the user. If that happens, we create a pushpin, and set up another listener that checks for a click on that particular pin.

If a pin gets clicked, and does not yet have a recording associated with it, we start the MyVox side of things. We create a RecordingList, and put a single Recording in it. Then we start a RecordingSession. MyVox sends us back a phone number and PIN, which we show to the user in a Google Maps info window. The caller calls and leaves the recording; while he or she is on the phone, we update a status display within the info window to show the caller's progress in making the recording. Once the recording is made and saved, we display a link to it within the info window. We also store the URL in a "pointRecordings" object, which associates the recording with that particular point on the map.

If the user clicks on a pin that already has a recording associated with it, the app recognizes this, because it checks for the existence of a pointRecordings object at the pushpin's location before invoking MyVox. In this case, it instead simply shows a link to the recording.

Note that this demo could be elaborated on in a ton of ways. Here are a few possibilities:

• Persistence: If I leave the map and come back to it, the pushpins and recordings are gone
• Instances: Different users should be able to create their own maps and save them individually
• Photos: Combining photos and voice on a map would be very powerful
• Text: I should be able to put up text comments too
• Better controls: Right now, you can't delete a pushpin from the page, or delete/overwrite a recording on an existing pushpin, and if you double-click to zoom, you end up also accidentally creating a pushpin
• Prettification: The info windows are a little clunky right now, and a better Javascript programmer could produce a slicker recording experience

Example Code:
To see the code, please use the link at the top of the description to visit the app. Then view the source by clicking "View" on your browser, and selecting "Source Code".