In this chapter, you will explore the following:
• Using the Google Maps API to play and display video, audio, and images
• Creating HTML5 markup dynamically
• Separating the program from descriptions of content
• Building a geography game
Introduction
The projects in this chapter make use of the Google Maps API as a way to play video, display images, or play audio and display an image, all based on geographic locations. You can use these projects as models to build a study of a geographic area, report on a business or vacation trip, or create a geography quiz. I will describe three distinct applications. For all three applications, I have acquired media, such as video files, audio files, and image files, and I have defined in code an association between the files and specific geographic locations. To give you an idea of what I mean, for my projects, associations between a target location (which is given in latitude and longitude coordinates in the code) and media are shown in Table 5-1.
Table 5-1. Outline of Content
Description of Location Media
Purchase College Video from robotics class
Mount Kisco Picture of Esther and an audio file of her playing piano
Dixon, Illinois Picture of Aviva
Statue of Liberty, New York City Video of fireworks
All three applications proceed smoothly with the different types of media. This is due to the features of HTML5 and, I say modestly, my programming. The media files are separate and the same for all three applications. It still is recommended that you supply multiple video and audio formats to make sure your application will work in the different browsers. The media types recognized by browsers may change so that fewer types are required, but this is not the case at this time.
The first application, consisting of one HTML file, named mapvideos.html, invites the viewer to click the map. If the click is close enough to one of the targeted locations, the viewer either sees the
corresponding image, sees the corresponding video playing, or both sees the corresponding image and hears the corresponding audio file. The program handles all three types of media and media
combinations.
The second application appears to the viewer to be the same as the first, but there is an important difference in the implementation. This application consists of two html files: mapmediabase.html and mediacontent.js. The mediacontent.js file holds the information describing the specific media content of the application. The mapmediabase.html program brings in the mediacontent.js file and creates during runtime what is necessary to replicate the first application.
I include both the first and second application because the first one is easier to understand, since all the information is in one place. When you develop your own applications, you can try to go straight to an implementation that separates coding from content, but don’t feel too bad if you don’t.
The third application is a quiz. Like the second, it consists of two files: mapmediaquiz.html and mediaquizcontent.js. The mediaquizcontent.js file contains information connecting the media to the locations and also contains the text for the questions.
The three applications have much of the same coding. The process of creating the second and third applications will show you how to scale up your applications by separating the details of a specific set of media (or other things) from the bulk of the programming.
Figure 5-1 shows the opening screen for the first application.
Figure 5-1. Opening screen
Figure 5-2 shows what happens when I click the screen on the Purchase College campus. A video clip appears and starts playing. You also can see “Lego robot” in the title position.
Figure 5-2. Result of clicking at Purchase College
Figure 5-3 shows the result of clicking the screen, but not sufficiently close to any of the target locations. Notice that I have panned the map, moving it to the north.
Figure 5-3. Click not close to any target
Figure 5-4 shows the result of my clicking near enough to Mt. Kisco to get a reward. I needed to move further north to get to Mt. Kisco. Notice also the audio control, providing a way to pause and resume playing and also change the speaker volume. The controls for audio (and video) will be different in the different browsers, but the functionality is the same.
Figure 5-4. Image-and-audio combination
playing and I still see the picture.
Figure 5-5. Zooming out in preparation for a pan south
Figure 5-6 shows the result of moving the map to the south and then zooming in to the location of the Statue of Liberty, the targeted location for the fireworks video clip.
Figure 5-6. Clicking Liberty Island after panning and zooming in
Again, I know where the pictures are, so I zoom out, pan to the west of Chicago, and click the small town of Dixon, Illinois. Figure 5-7 shows the image I expected.
Figure 5-7. Panning to the west and zooming in to Dixon, Illinois
It actually took some work (to be explained later) to make the second application resemble the first with respect to layout.
Now I will show screenshots for the third application, the quiz. Figure 5-8 shows the opening screen.
Figure 5-8. Opening screen of quiz
Figure 5-9 shows an incorrect response. I just clicked the map near Purchase College.
Figure 5-9. Incorrect response
I know the answer, and furthermore, how to get to it on the map. I move the map north to Mt. Kisco and click there. Figure 5-10 shows the familiar image and the audio control. Piano music is playing.
Figure 5-10. A correct answer is given, so the image is shown and the audio is played, and the next question is given.
Notice that the screen shows the next question as soon as the last one is answered correctly.
When designing a game such as this one, it is best to take pity on a player when they don’t know the answer. I provide the Hint? button, though it goes beyond just giving a hint. Skipping ahead, I will get the next two questions correct, and then I will need help on finding Dixon, Illinois. Figure 5-11 shows the prompt.
Figure 5-11. Prompt concerning flute playing
If I click the Hint? button, the application will bring in a new map, centered at the desired location.
Figure 5-12 shows the screen.
Figure 5-12. Map centered on Dixon, Illinois
name of the place—and I won’t argue with you. This is what I decided to do.
With this introduction, I’ll go on to discuss the project history and the critical requirements.
Project History and Critical Requirements
A senior at Purchase College had collected and made video clips and photographs about the ethnic neighborhoods of Queens, New York, and wanted a way to present the work. The Google Maps API and the new facilities in HTML5 seemed perfect for the task. Keep in mind that the student only needed a way to present the work on a computer she set up at the senior project show, so the issue of
noncompliant browsers was not a concern. The critical requirements include what is supplied by the Google Maps API. As you learned in the previous chapter, we can write code to access a map centered at a specified geographic location, set at an initial zoom level, and showing views of roads or satellite or terrain or a hybrid. In addition, the API provides a way to respond to the event of the viewer clicking the map. We need a way to define specific locations to be compared with the location corresponding to the viewer’s click.
My first system for the student just used video and images. I later decided to add the image-and-audio combination. The critical requirement for the application is displaying and playing the designated media at the correct time and stopping and removing the media when appropriate, such as when it is time for the next presentation.
After developing the initial project, I thought of changes. The first one was the addition of the image-and-audio combination. I decided I did not want audio just by itself. The next change was to separate the specific content from the general coding. This, in turn, required a way to create markup for video and audio elements dynamically.
I always like games and lessons, and it seemed like a natural step to build an application with questions or prompts that the viewer—now best described as player or student. The player gives the answer by finding the right position on the map. Both the general application and the quiz application have a requirement to define a tolerance with respect to the answers. The viewer/player/student cannot be expected to click exactly on the correct spot.
When testing the quiz, I realized I needed some way to help the player get past a particularly difficult question. Because I am a teacher, I decided to show the player the answer, rather than just skipping the question. However, as I indicated earlier, you may be able to devise a better way to produce hints.
Games should have some randomness feature, so I decided to shuffle the questions, though I did this somewhat later in the process.
Having described the critical requirements, the next section will contain explanation of the specific HTML5 features that can be used to build the projects.
HTML5, CSS, and JavaScript Features
Like the map maker project in Chapter 4, these projects are implemented by combining the use of the Google Maps API with features of HTML5. The combination for this project is not as tricky. The map stays on the left side of the window and the media is presented on the right. I will review quickly how to get access to a map and how to set up the event handling, and then go on to the HTML5, CSS, and JavaScript features for satisfying the rest of the critical requirements.