Google Maps control set

Previous: Google Maps Event

Next: Google Map Types

A Google map - the default control set is set:

Google Maps - default control set is set:

When using a standard google map, its default settings are as follows:

.Zoom- Displays a slider bar to control the Zoom level map
.PPan- On the map display is a flat bowl-like controls, click on the four corners of the pan the map
.MapType- Allows user to select between map types (roadmap and satallite) switch
.StreetView- Appears as a Pegman icon, you can drag it to a point on the map to open Street View

Google Maps - more control set

In addition to the above default control set, Google also:

.Scale- Display map scale
.Rotate- Display a small circumference of the icon, you can rotate the map
.verview Map- plan view from the perspective of a wide-area map

When you create a map you can specify which set of controls is displayed by setting the option or by calling setOptions () to change the map setting options.

Google Maps - turn off the default control set

You may want to turn off the default set of controls.

To turn off the default control set, set the property to map disableDefaultUI true:

Examples

disableDefaultUI:true

try it"

Google Maps - all controls set to open

Some controls set the default display on the map, while others will not, unless you set them.

Set the control to make it visible true - Set the control to false to hide it.

The following examples are open all the controls:

Examples

panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true

try it"

Google Maps - modify the control set

Some maps controls are configurable. Change control set by developing control options field.

F For example, to modify the Zoom control option specifies zoomControlOptions. zoomControlOptions contains the following three options:

.google.maps.ZoomControlStyle.SMALL- display minimize zoom control
.google.maps.ZoomControlStyle.LARGE- standard zoom slide show controls
.google.maps.ZoomControlStyle.DEFAULT- based equipment and size of the map, select the most appropriate control

Examples

zoomControl : true ,
zoomControlOptions : {
style : google . maps . ZoomControlStyle . SMALL
}

try it"

Note: If youneed to modify a control, first turn control (set it to true).

Another control is MapType control.

MapType control may appear in one of the following style options:

google.maps.MapTypeControlStyle.HORIZONTAL_BAR, in a horizontal bar will appear as a set of control buttons as shown in Google Maps.
google.maps.MapTypeControlStyle.DROPDOWN_MENU, for displaying a single button control, allowing you to select the map type from the drop-down menu.
google.maps.MapTypeControlStyle.DEFAULT, for displaying the "default" behavior, which depends on screen size and may change in future versions of the API.

Examples

mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
}

try it"

Similarly, you can use the location ControlPosition property specified control:

Examples

mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.TOP_CENTER
}

try it"

Google Maps - set custom control

Create a custom control to return to London for the Click event: (If the map is dragged):

Examples

controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'yellow';
controlUI.style.border='1px solid';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Set map to London';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily='Arial,sans-serif';
controlText.style.fontSize='12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Home<b>'
controlUI.appendChild(controlText);

try it"