Google Maps API 3

CHAPTER 7 ■ INFOWINDOW TIPS AND TRICKS
// First we create the container for the content
// of the InfoWindow
var content = document.createElement('div');
// We then create a paragraph element that will contain
// some text
var p = document.createElement('p');
p.innerHTML = 'This marker is positioned on Manhattan.';
// We then create a second paragraph element that will contain
// the clickable link
var p2 = document.createElement('p');
Now you need to create the link. You start by creating a element and give it a text and a value to
its href attribute.
// Creating the clickable link
var a = document.createElement('a');
a.innerHTML = 'Zoom in';
a.href = '#';
■ Note The standard way of assigning values to HTML elements is the DOM method setAttribute(). But since
there are some differences in implementation in different browsers (mainly IE), I stick with the attributes
innerHTML and href since they are supported by all browsers. Another approach could be to use a JavaScript
framework such as jQuery or prototype to do this. They will take care of the browser inconsistencies for you.
OK, so now that the element is created, it’s time to add the magic that will zoom the map. You
will do this by assigning an anonymous function to its onclick event. In the anonymous function, you
will add the code that will do the heavy work in this example.
a.onclick = function() {
// Code goes here
}
You probably recognize this syntax since it’s the same as the one you’ve been using all along when
attaching an onload event to the windows object.
■ Note There are other ways of attaching click events to an element than using the onclick property. The benefit
of using onlick is that it’s cross-browser compatible. The standard way of doing it, using the method
addEventListener(), involves having to provide a separate method for IE called attachEvent() since it doesn’t
support it.
152