Google Maps control set
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
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
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
}
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
}
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
}
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);
Google Maps - Control Set Reference Manual
Google Maps API Reference Manual .