Google Maps API 3

CHAPTER 5 ■ X MARKS THE SPOT
■ Note Actually, when you click something, three events happen. They are click, mousedown, and mouseup. You
can choose which one of these you want to capture. What you should know is that mousedown happens first, right
when you hold down the mouse button. The mouseup event happens when you release the depressed mouse
button, and click happens after mouseup and mousedown both have occurred. Similarly, when you press a key on
the keyboard, three events happen. These are besides keypress, keydown, and keyup. Of these, keydown happens
first, then keyup, and lastly keypress.
Listen for the Events
What these events have in common is that you can catch them in your code and do stuff when they are
triggered. To do this, you need to add listeners. A listener is connected to an object and a certain event.
It just sits quietly and waits for the event to happen. When the event does happen, the listener pops
into action and runs some code. In the Google Maps API, there’s a method for adding a listener that’s
called google.maps.events.addListener(). It takes three arguments:
• The object it’s attached to.
• The event it should listen for.
• A function that is executed when the event is triggered. This function is called an
event handler.
Adding a Click Event to the Marker
To add a click event to your marker, you need to extend the code with an event listener (Listing 5-8).
Listing 5-8. Adding an Event Listener
// Creating an InfoWindow with the content text: "Hello World"
var infowindow = new google.maps.InfoWindow({
content: 'Hello world'
});
// Adding a click event to the marker
google.maps.event.addListener(marker, 'click', function() {
// Code to be run...
});
This code will attach a click event to the marker that will run some code when it’s being triggered.
Now all you have left to do is to write some code that will open the InfoWindow.
The InfoWindow object has a method called open() that will open the InfoWindow and make it visible
on the map. The open() method takes two arguments. The first argument is a reference to the map
object that it will be added to (in case you have more than one map on the page). The second argument
is the object that the InfoWindow will attach itself to. In our case, you want to attach it to the marker
being clicked. The reason you need to do this is that you want the InfoWindow to know where it should
position itself on the map. If you provide it with an object, it will automatically position itself so that the
tip of the stem of the speech bubble will point at the object. This argument is actually optional. You
81