Introduction
This advanced Google Maps™ API tutorial has been produced by White Rock Solutions as part of a series of complete and comprehensive step by step guides to using the Google Maps™ API to develop searchable interactive Google™ location maps and Google™ map applications.
Overview : Google Maps™ API Tutorials - Volume 3 - Add Map Controls
In Volume 3 - Add Map Controls we start by taking a close look at the different types of map controls that can be added to a Google™ map using the maps API.
We then guide you step by step through an example of adding Google Maps™ API code to the Google-Maps-API-Basic-Map-Template.htm file from Volume 2 - Google Maps Template to display various map controls on our Google™ Map.
Part 1 – Overview of Map Controls
Navigation and/or Zoom Controls
There are three types of Navigation and/or Zoom Controls that can be added to a map. Navigation and Zoom Controls are optional as there are alternative ways to navigate and zoom without using one of these three controls.
Map Scale Control
There is only one type of Map Scale Control that can be added to a map.
Overview Map Control
There is only one type of Overview Map Control that can be added to a map.
Map Type Controls
There are three Map Type Controls that can be added to a map.
Part 2 – Add Map Controls to a Google™ Map
A detailed explanation of the API code used to add each type of map control to a Google™ Map.
Part 3– Add Map Controls to a Google™ Map - Example
Step by step worked example of adding API code to add map controls to a Google™ Map.
Downloads
Subscribers to this volume of tutorials can download the following source code: -
- Google-Maps-API-Basic-Map-Template.htm
- Google-Maps-API-Basic-Map-Template_MapControls.htm
All source code files are valid XHTML 1.0 Strict.
Overview of Map Controls
Navigation and/or Zoom Controls
There are three types of Navigation and/or Zoom Controls that can be added to a map. Navigation and Zoom Controls are optional as there are alternative ways to navigate and zoom without using one of these three controls.
Notes
- An alternative way to pan (move) the map is to place your mouse cursor over the map until the mouse cursor changes to a hand. Click and hold the left mouse button until the mouse cursor changes from a hand to a fist and “drag” the map up, down, left or right.
- An alternative way to zoom in on the map is to “double click” on the map using the left mouse button.
- An alternative way to zoom out on the map is to “double click” on the map using the right mouse button.
Type 1: GSmallMapControl()
Type 2: GLargeMapControl()
Note
A single PNG image (mapcontrols2.png) is dynamically styled to create the control. The control is dynamically re-styled when the Zoom Slider is moved.
Type 3: GSmallZoomControl()
Map Scale Control
There is only one type of Map Scale Control that can be added to a map.
Type 1: GScaleControl()
Note
A single PNG image (mapcontrols2.png) is dynamically styled to create the control. The control is dynamically re-styled when Zoom In or Zoom Out is activated.
Overview Map Control
There is only one type of Overview Map Control that can be added to a map.
Type 1: GOverviewMapControl()
Note
A single PNG image (mapcontrols2.png) is dynamically styled to create the Collapse / Expand buttons for the control.
Map Type Controls
There are three Map Type Controls that can be added to a map.
Type 1: GMapTypeControl()
Note
No image files are used to create the Map Type Control. The “buttons” are created using style attributes.
Type 2: GMenuMapTypeControl()
Type 3: GHierarchicalMapTypeControl()
Notes
- When the Satellite view button is selected a “Show labels” checkbox becomes available below the Satellite button. The “Show labels” checkbox is selected by default (IE: Hybrid view). Removing the tick from the checkbox activates Satellite view.
- The “Show labels” checkbox auto-hides after a few seconds. To re-display the Show labels” checkbox hover over or select the Satellite button.
Add Map Controls to a Google™ Map
To add one or more of the map controls discussed in Part 1 – Overview of Map Controls to a map simply use one or more of the following lines of code: -
The code explained: -
(i) Variable "Name" of the map instance to which the control should be added. (Refer: Volume 2 - Google Maps Template - Part 3 – Modify the Example Google Maps™ API Code)
(ii) Google Maps™ API method used to add the control to the map instance
(iii) Type of "new" control to add. (Refer: Part 1 – Overview of Map Controls)
Notes
- If required, substitute the “myMap” prefix with the name of the instance of your specific map.
- Normally, only one of the three possible Navigation and/or Zoom controls should be added to any one map.
- Normally, only one of the three possible Map Type controls should be added to any one map.
Add Map Controls to a Google™ Map - Example
The Google-Maps-API-Basic-Map-Template.htm file (Refer: Volume 2 - Google Maps Template - Part 3 – Modify the Example Google Maps™ API Code) is used as the starting point for this example.
(a) - Open the Google-Maps-API-Basic-Map-Template.htm file in a text editor such as Notepad.
Note
If you did not complete the tutorial Volume 2 - Part 3 – Modify the Example Google Maps™ API Code or you did not save the Google-Maps-API-Basic-Map-Template.htm file, you can download the example code used below from the downloads <tab> of this tutorial.
(b) Locate the “function initializeMyMap()” section of code.
(c) Insert the additional yellow highlighted lines of code.
(d) Select “Save As..." from the File menu in Notepad to save the file as Google-Maps-API-Basic-Map-Template_MapControls.htm
Notes
- The Google Maps™ API key in the example code is unique to http://www.websitelocationmaps.com. Your unique Google Maps™ API key will be different.
- If you did NOT use the Google-Maps-API-Basic-Map-Template.htm file as the basis for this example substitute the “myMap” prefix in each of the four additional lines of code with the name of the instance of your specific map.
If you open and view the Google-Maps-API-Basic-Map-Template_MapControls.htm file in a web browser it should look similar to this: -
(a) Large Navigation and Zoom Control - GLargeMapControl()
(b) Map Scale Control - GScaleControl()
(c) Drop Down Map Type Control - GMenuMapTypeControl()
(d) Overview Mini-Map Control - GOverviewMapControl()
