Google Maps API 3

CHAPTER 4 ■ TAKING THE MAP FURTHER WITH MAPOPTIONS
This will provide you with a page that looks something like Figure 4-15.
Figure 4-15. The example map
The page has two buttons with the IDs getValues and changeValues. Right now these buttons do
absolutely nothing when they’re clicked, but you’re going to use their IDs to attach click events to them.
By using the JavaScript method document.getElementById(), you create a reference to them. After you’ve
pinpointed the buttons, you’re going to add a little something extra, a click event with the help of the
onclick event listener. Let’s start with the getValues button. Insert this code right after the creation of
the map:
document.getElementById('getValues').onclick = function() {
// put code here
}
An anonymous function is attached to the onclick event, and it’s inside this function that you will
put the code to retrieve values from the map.
The first value that you will get is the zoom level of the map. To do this, you’re going to use the
getZoom() method. To display the value that this method returns, you’re going to use an alert, and you’re
also going to add some text that explains what this value is:
document.getElementById('getValues').onclick = function() {
alert('Current Zoom level is ' + map.getZoom());
}
If you run the page now and click the getValue button, the alert shown in Figure 4-16 will trigger.
66