Google Maps API 3

CHAPTER 7 ■ INFOWINDOW TIPS AND TRICKS
Providing the HTML As a String
In this example, you will create an InfoWindow that will contain an image a heading, some text, and a link.
The image you will use is of a squirrel with the dimensions 100 × 100 pixels. It’s included in the code that
comes with the book. The final HTML will look like this:
Maps are awesome
Some sample text
A sample link
Notice that the HTML elements are enclosed inside . You’re doing this because you
want to be able to pinpoint this content from the style sheet.
The end result will look like Figure 7-2.
Figure 7-2. An InfoWindow with styled HTML in it
Before you create the content, you will have to make sure that you have a InfoWindow object. You will
use the same approach as described in Chapter 5 where you define a global variable called infoWindow
that you reuse for each window that is opened. Each time the user clicks a marker, you check whether
the variable infoWindow contains an InfoWindow object. If it doesn’t contain one, you create it. You’ve
already defined the infoWindow variable at the top of the code. You now need to check whether it exists:
// Check to see if an InfoWindow already exists
if (!infoWindow) {
infoWindow = new google.maps.InfoWindow();
}
134