Google Maps API 3

CHAPTER 5 ■ X MARKS THE SPOT
What happens here is that instead of creating a new InfoWindow every time the user clicks a
marker, you just move the existing one around and at the same time change its content. It’s easy to
check whether the variable infowindow is carrying an object with an if statement. An empty variable
will return undefined, which means false in JavaScript. If it, on the other hand, carries an object, it will
return the object, which in JavaScript is the same thing as true.
Before, you defined the content of the InfoWindow upon its creation. Since you now reuse the same
InfoWindow object over and over again, you need to set the content in some other way. Fortunately, the
InfoWindow object has a method called setContent() that will do exactly that. This method takes plain
text, HTML, or a reference to an HTML node as its value, much like the content property of the
InfoWindowOptions object did. You’re going to give it the exact same value as you gave the content
property early.
With that in place, all you need to do is to open the InfoWindow (Listing 5-19).
Listing 5-19. Finalizing the Event Handler
// Add click event to the marker
google.maps.event.addListener(marker, 'click', function() {
// Check to see if the infowindow already exists and is not null
if (!infowindow) {
// if the infowindow doesn't exist, create an
// empty InfoWindow object
infowindow = new google.maps.InfoWindow();
}
// Setting the content of the InfoWindow
infowindow.setContent('Place number ' + i);
// Tying the InfoWindow to the marker
infowindow.open(map, marker);
});
Now the code will produce a map that will display only one InfoWindow at a time. Listing 5-20
shows the complete code.
Listing 5-20. The Complete Code for Example 5-4
(function() {
window.onload = function() {
// Creating an object literal containing the properties
// you want to pass to the map
var options = {
zoom:3,
center: new google.maps.LatLng(37.09, -95.71),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Creating the map
var map = new google.maps.Map(document.getElementById('map'), options);
// Creating an array which will contain the coordinates
94