http://www.developer.com/services/tweaking-the-google-maps-api-controls.html

Back to article

Taking Control of the Google Maps API V3 Controls


March 23, 2011

Speaking in broad terms, any map generated using the Google Maps API consists of three visual elements: the map, the controls, and the overlays. While the map should be self-explanatory, the other two might require a bit of elaboration. An overlay is anything that annotates the map in a meaningful way, such as a marker, informational window, or polyline.

A control refers to any widget that allows the user to interact with the map. For instance, the MapType control is usually located at the top-right of the map, and allows the user to switch between the default map and satellite views. The Zoom control allows the user to control the map's zoom level. Several other default controls exist, including the Street View control, Scale control, and Pan control.

The typical Google Maps API-generated map consists of a few basic elements (see Figure 1), including the map, the Street View control, the Zoom control, and the MapType control. However, did you know the API provides developers with a great deal of flexibility in terms of not only determining how these controls are presented, but also whether they appear at all? In this article I'll show you several ways to take control of, well, your controls.

A Typical Google Maps API-generated Map
Figure 1. A Typical Google Maps API-generated Map

Disabling the Default Google Maps UI

As mentioned, the default Google Maps user interface consists of the map and three controls (MapType, Street View, and Zoom). You can remove all three of the controls, leaving only the map by passing the disableDefaultUI property to the map initialization literal, as demonstrated here:

var latlng = new google.maps.LatLng(40.44062, -79.99588);
var options = {
zoom: 14,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map"), options);

Disabling the default UI will produce the map presented in Figure 2.

Disabling the Default Google Maps UI
Figure 2. Disabling the Default UI

Adding Controls to the Map with the Google Maps API

If you've been a Google Maps API user for a few years, you've probably noticed that the Pan control is no longer rendered by default. I presume Google concluded that users had become sufficiently familiar with the ability to navigate to the desired location by dragging with the mouse. If you'd like to buck the conventional wisdom and add the pan control, pass the panControl to the map initialization literal:

var latlng = new google.maps.LatLng(40.44062, -79.99588);
var options = {
zoom: 14,
center: latlng,
panControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map"), options);

Adding the panControl control produces the map presented in Figure 3.

Adding the panControl Control
Figure 3. Adding the panControl Control

In fact, you can exercise complete control over all of the supported controls by passing the mapTypeControl, panControl, scaleControl, and zoomControl to the map initialization literal. In the following example, I'll enable the mapTypeControl and scaleControl, but disable the panControl and zoomControl:

var options = {
zoom: 14,
center: latlng,
mapTypeControl: true,
panControl: false,
scaleControl: true,
zoomControl: false,

mapTypeId: google.maps.MapTypeId.ROADMAP
};

Adding this array of controls produces the map in Figure 4.

Controlling Control Display with Google Maps API
Figure 4. Controlling Control Display with Google Maps API

Tweaking the Google Maps MapControl Display and Default Map Type

By default, the Google Maps API will use a horizontal bar layout for presenting the two map type options (the default roadmap and the satellite). You can optionally alternatively present this information using a dropdown menu, as exemplified in Figure 5.

Using a Map Type Dropdown Menu
Figure 5. Using a Map Type Dropdown Menu

Use the dropdown menu layout by passing google.maps.MapTypeControlStyle.DROPDOWN_MENU to the style property of the mapTypeControlOptions, as demonstrated here:

var options = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};

Notice how the default map type is also set using the mapTypeId property. In the case of the above example, we're setting the map type to the default ROADMAP. You can alternatively set this to SATELLITE, HYBRID, or TERRAIN.

Assigning Control Location with Google Maps API

All map controls are associated with default display locations. The mapType control is situated at the top-right of the map, while the StreetMap, panControl, and zoomControl are all presented at the top-left of the map. You can, however, override these defaults to place the controls wherever you please. This is accomplished by passing a control position setting to each respective control's position property. For instance, you can move the mapType control to the lower-right of the map like so:

var options = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.RIGHT_BOTTOM
}
};

Executing this variation produces the map presented in Figure 6.

Moving the Map Type Control
Figure 6. Moving the Map Type Control

This feature is more powerful than it may initially appear because of the considerable flexibility you have in terms of control placement. For instance, specifying RIGHT_BOTTOM is different from specifying BOTTOM_RIGHT in that if you used the latter instead of the former (which was used in the previous example), the end result is a map type control placed as depicted in Figure 7.

A Map Type Control Placement Variation
Figure 7. A Map Type Control Placement Variation

The Google Maps API documentation offers a detailed breakdown of the placement position differences. See this page for more details.

Creating Your Own Controls

Even seasoned Google Maps API developers are often surprised to learn it's possible to create custom map controls. For instance, you might create a control that enables or disables a default set of markers or displays a marathon route. The WalkJogRun website offers a particularly impressive set of custom controls, which are definitely worth checking out if you are interested in creating custom controls.

As a simple example, I've created a custom control that will display markers related to the Heinz Field and PNC Park football and baseball stadiums located in Pittsburgh, Pennsylvania. These markers will display when clicking the STADIUMS control presented in Figure 8.

Creating a Custom Control with Google Maps API
Figure 8. Creating a Custom Control

The code used to create such a control is surprising easy. All you have to do is design a DIV element using whatever CSS styling you'd like. Then you'll identify this DIV as a map control by pushing it onto the map.controls array, and finally assign a listener to the DIV, which will execute the associated JavaScript in accordance with a particular event (such as a click). The code (less the CSS and DIV) used to create this control is presented below:

function initialize() {
var latlng = new google.maps.LatLng(40.44579, -80.01504);
var options = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map"), options);

var element = document.getElementById('control');

map.controls[google.maps.ControlPosition.TOP_RIGHT].push(element);

google.maps.event.addDomListener(element, 'click', function() {
var nfl = new google.maps.Marker({
position: new google.maps.LatLng(40.44579, -80.01504),
map: map,
title:"Heinz Field"
});

var mlb = new google.maps.Marker({
position: new google.maps.LatLng(40.44690, -80.00551),
map: map,
title:"PNC Park"
});
});


}

Conclusion

Are you doing anything interesting with Google Maps API controls? Tell us about your experiences in the comments!

About the Author

Jason Gilmore--Contributing Editor, PHP--is the founder of EasyPHPWebsites.com, and author of the popular book, "Easy PHP Websites with the Zend Framework". Jason is a cofounder and speaker chair of CodeMash, a nonprofit organization tasked with hosting an annual namesake developer's conference, and was a member of the 2008 MySQL Conference speaker selection board.

Sitemap | Contact Us