October 31, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Taking Control of the Google Maps API V3 Controls

  • March 23, 2011
  • By Jason Gilmore
  • Send Email »
  • More Articles »

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


Tags: Google Maps

Originally published on http://www.developer.com.

Page 1 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel