Modifying the Map's User Interface

In this lesson, you'll be adding to the code you wrote in Lesson 3, so create a copy of your lesson3.html file and call it lesson4.html.

Unless otherwise specified, a Google map includes a set of controls in the upper-right corner that allows the user to switch between the available map types (Map, Satellite and Terrain). There is also a zoom control in the lower-right corner for zooming in/out on the map. Depending on the application or your personal preference, you may want to deviate from these defaults.

Modifying the default map type control

Altering the map type control involves creating an object of the MapTypeControlOptions class. As with the MapOptions and MarkerOptions classes we encountered in Lesson 3, a MapTypeControlOptions object must be created as an object literal. It has a mapTypeIds property for specifying which map types should be made available, a position property for specifying where on the map the control should appear and a style property for specifying whether the control should be a set of side-by-side buttons or a drop-down menu.

In Lesson 3, we saw that the Hello World example initialized the map so that it displayed the basic road map using the ROADMAP map type ID. The other map type IDs currently built into the API are SATELLITE, HYBRID, and TERRAIN. These ID constants are accessed through the MapTypeId class, which like all classes in the Google Maps API, must be referenced through the "google.maps" namespace.

Setting the mapTypeIds property of the MapOptions object requires an array of MapTypeId constants. A simple way to produce an array in JavaScript is to enclose a comma-separated list of items in square brackets. Thus, the code for setting up a map to display only the Map and Hybrid options might look like this:

var mapTypeControlOpts = {
    mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID]
};

The ControlPosition class defines the constants that can be used to set the position of the map type control. These constants are TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT, TOP, BOTTOM, LEFT, and RIGHT. To position the map type control on the bottom of the map, you would use code like this:

var mapTypeControlOpts = {
    position: google.maps.ControlPosition.BOTTOM
};

Finally, the MapTypeControlStyle class defines the constants that can be used to set the style of the map type control. These constants are DEFAULT, DROPDOWN_MENU and HORIZONTAL_BAR. The HORIZONTAL_BAR style shows the map type options as a set of buttons arranged side by side horizontally and is best suited for maps viewed on a large display such as a desktop monitor. The DROPDOWN_MENU style lists the map type options in a hierarchical dropdown menu and is best suited for maps viewed on a small display such as a smartphone. The DEFAULT style enables the API to switch automatically between a horizontal bar and dropdown menu depending on the size of the browser window that's displaying the map rather than hard wiring one or the other. To display the map types as a menu (and use the same mapTypeIds and position settings from above), you would use code like this:

var mapTypeControlOpts = {
    mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID],
    position: google.maps.ControlPosition.BOTTOM,
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
};

Once the MapTypeControlOptions object is defined, it can be used to set the mapTypeControlOptions property of the MapOptions class:

var mapOptions = {
    mapTypeControlOptions: mapTypeControlOpts
};

The MapOptions object would then be applied to the map as an argument to the Map class constructor, just as before.

This discussion presumes that you want to give users a choice of background layers. If you'd instead prefer to lock them into one map type, the MapOptions class has a Boolean mapTypeControl property that can be set to false to remove the map type buttons from the interface:

var mapOptions = {
    mapTypeControl: false
};

Modifying the map navigation controls

Past versions of the API made it possible for developers to select from a zoom control that included a slider and one that did not (i.e., just + and - buttons).  The slider version of the control also included a set of four arrows for panning the map.  At version 3.22, the option to implement the slider version of the control was removed.  The zoom control is now a pair of + and - buttons, located in the bottom right of the map by default.  The control can be re-positioned using one of the constants described above in the discussion of the map type control.  For example:

var zoomControlOpts = {
    position: TOP_LEFT
};

Using the same mapOptions object literal from the previous section on customizing the map type control, you would use the zoomControlOpts variable to set the zoomControlOptions property.

var mapOptions = {
    zoomControlOptions = zoomControlOpts
};

The developer also has the ability to disable the zoom control altogether:

var mapOptions = {
    zoomControl: false
};

The elimination of the slider style of the zoom control also did away with the panning buttons.  Users must pan the map by clicking and dragging (or by swiping on a touchscreen).

Modifying other map controls

Other map controls that can be customized by developers include the street view control and scale control. As with the ones discussed above, these controls can be enabled/disabled using the Boolean MapOptions properties streetViewControl and scaleControl. The street view control is enabled by default, while the scale control is disabled.

Besides enabling/disabling them, the only customization option available for these controls is the position of the street view control. The street view control ("pegman" icon) appears just above the navigation controls by default. Overriding this position requires creating a StreetViewControlOptions object much like the ControlOptions objects discussed above.

Summary

As you can see, the API provides developers with a fair bit of control over the user interface. One last point I want to bring to your attention is the disableDefaultUI property. If you want to build an interface that differs quite a lot from the default, you can set this property to true, effectively giving yourself a clean slate with which to work. Leaving the property unset means that any changes you make will have the default interface as the starting point.

The Google documentation devotes a full page to map controls and I encourage you to consult that page for a more thorough discussion of this topic. You'll find a couple of working examples on this page along with information on adding your own custom controls.

Once you've experimented with the various controls discussed in this section and gotten a feel for modifying the user interface, move on to the next part of the lesson, where you'll see how to style the Google basemap.