Audio enabled GoogleMap

Use the VoodooVox Http/XML/JSON API combined with the google map API


This will combine the Google Maps API with our API to allow people to place voice annotations on highlighted parts of a Google-generated map. Additionally, a second version will let users add Picasa Web Albums or other Web-based pictures as well, showing how three different APIs can come together to produce one powerful application.

The application will be a working one, and users will be able to generate maps that they can use on their own web sites, so this is not purely a demonstration piece. However, in order to make it so all the code is visible to and usable by developers, it will not incorporate the ability for users to edit their maps once they have been generated, though we’ll explain to developers how they might add such a capability to their own versions of the application.


Users begin with a Google map, which they can zoom and relocate, using the standard Google controls. They can then add “push pins” to the map, highlighting specific locations, again with the standard controls. Each push pin has a dialog box that appears when it is clicked. So far, this is standard Google mapping functionality.

Each dialog box also has an “add audio” button. When this is clicked, the app will check to see if the user is already on a call to record audio for this map, or not. If not, the app will give the user a phone number and code to call the phone system. At this point, Open MyVox creates a recording session for the user, with a single recording to be made.

If the user is already on the call when she asks to add a recording, then the app will instead show the user a message stating that audio for this point on the map will be recorded next, and to please wait. This message has a cancel button. Until either the phone system is ready to make the indicated recording, or the cancel button is hit, the user may not take further action on the map. Once the phone system is ready to deal with that next message, the message goes away, and the user makes the recording.

The phone system takes one or more recordings from the user, depending on whether the user clicks on the map to make additional recordings while on the line or not. Once the recordings are made, they are stored, and the app updates itself to show an audio recording in each appropriate push pin dialog box. Clicking an audio recording icon plays the audio. The user can still re-record any piece of audio by clicking the appropriate button within the dialog box.

Once the user is done editing a map, she can save it. Saved maps result in a snippet of code that can be put into a page to add the map to that page.

A visitor who visits the map and clicks on a voice-enabled push pin will hear the audio when that push pin is opened (or, if Google does not allow this, then she’ll have to click an audio icon to play the audio).

Picture-enabled version

We offer a separate picture-enabled version to provide a more powerful application without cluttering up our basic demonstration piece with additional functionality. In the picture-enabled version, in addition to being able to put up audio for a given push pin, a user may also associate a picture to be shown in that pushpin. She can do this from any Picasa Web Album or from a URL.

The former requires the use of the Picasa Web Albums API ([url removed, login to view]). We ask the user for the name of the user from whom we’ll be grabbing photos, and optionally the name of the album we’ll be browsing; if no album name is specified, then when the form is submitted, we get a list of the user’s albums from Google, and then ask the user to pick one. Once we have a specific album selected, we get a list of pictures from the album, show thumbnails of each, and have the user pick one. This picture now appears in the thumbnail.

In the latter case, the user simply enters the URL of the picture in question. When submitted, the picture in question appears in the thumbnail.

A visitor who visits this album will see the picture and hear the audio auto-play associated with a push pin when it is opened.

Skills: Adobe Flash, JSP, XML

See more: xml use case, use case map, simply well, s controls, play icon html, parts now, on line map, on line developers, more visits, map begin, make own icon, list icon, jsp developers, icon play, icon google com, icon 8 * 8, how to relocate, how to produce an app, how to make a web page into an app, how make icon, google sites html editing, google maps get map, google html snippet, do not call phone number, combined result

About the Employer:
( 1 review ) Nyack, United States

Project ID: #199230