Chapter 7 — Extending the Google API Examples 107
map.centerAndZoom(new GPoint(-0.64,52.909444), 4);
}controller = document.getElementById(‘controller’);addcontrols();
}
function addcontrols() {
map.addControl(maptypecontrol);
map.addControl(largemapcontrol);
controller.innerHTML = ‘;
Hide Controls’;
}
function hidecontrols() {
map.removeControl(maptypecontrol);
map.removeControl(largemapcontrol);
controller.innerHTML = ‘;
Add Controls’;
}
//]]>
The following are the key areas of this example:
The creation of the control objects at the start of the JavaScript section.
The movement of the map object definition from the onLoad()function to the global
area of the JavaScript (which means you can access the map object from other functions).
The identification of the area where the add/remove controls button will be placed.
The main addcontrols()and hidecontrols()functions.The addcontrols()function calls the addControl()method on the map object to add
the control objects that were created at the head of the script. Note that pre-existing instances
of the objects are being added. This is important because the same principle will provide the
ability to later remove them.
Once the controls have been added, you add HTML to the controller section of the document
to provide a link for hiding them (by calling hidecontrols()). The hidecontrols()
function does the opposite; it removes the controls and then sets the HTML to add controls to
the map by calling the addcontrols()function.
Figure 7-2 shows the map in its initial state, with the controls displayed and the link for
hiding the controls at the bottom of the screen. Figure 7-3 shows the result when you click the
hidecontrols()link: The controls are gone and the link has changed to show a link for
adding the controls. Click that link to return to the state in Figure 7-2.