Google Mapscontrol set
A Google Map - Default Controls Settings:
Google Map - Default Controls Settings:
When using a standard Google map, its default settings are as follows:
- .Zoom - Displays a slider bar to control the map's zoom level.
- .Pan - Displays a pan control shaped like a flat-bottomed bowl; click the four corners to pan the map.
- .MapType - Allows users to switch between map types (roadmap and satellite)
- .StreetView - Displays a Street View Pegman icon that can be dragged onto a point on the map to open Street View.
Google Map - More Controls
In addition to the default controls above, Google also has:
- .Scale - Displays the map scale
- .Rotate - Displays a small circular icon that can rotate the map.
- .Overview Map - Shows an overhead view of the map from a wide perspective.
When creating a map, you can specify which controls are displayed by setting options, or you can change the map's settings by calling setOptions().
Google Map - Disabling Default Controls
You may want to disable the default controls.
To disable the default controls, set the map's disableDefaultUI property to true:
Google Map - Enabling All Controls
Some controls are displayed on the map by default, while others are not unless you enable them.
Set a control to true to make it visible - set a control to false to hide it.
The following example enables all controls:
Example
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true
Try it Yourself »
Google Map - Modifying Controls
Some map controls are configurable. You can modify controls by specifying control options.
F For example, the options for modifying the Zoom control are specified in zoomControlOptions. zoomControlOptions contains the following 3 options:
- .google.maps.ZoomControlStyle.SMALL-显show最smalltransformzoom control件
- .google.maps.ZoomControlStyle.LARGE-显showStandardzoom滑动control件
- .google.maps.ZoomControlStyle.DEFAULT - Selects the most appropriate control based on the device and map size.
Example
zoomControlOptions: {
style:google.maps.ZoomControlStyle.SMALL
}
Try it Yourself »
Note:To modify a control, first enable it (set it to true).
Another control is the MapType control.
The MapType control can be displayed as one of the following style options:
- google.maps.MapTypeControlStyle.HORIZONTAL_BAR, used to display a set of controls in a horizontal bar as buttons shown in Google Maps.
- google.maps.MapTypeControlStyle.DROPDOWN_MENU, used to display a single button control that allows you to select the map type from a dropdown menu.
- google.maps.MapTypeControlStyle.DEFAULT, which displays the "default" behavior. This behavior depends on screen size and may change in future versions of the API.
Example
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
Try it Yourself »
Similarly, you can use the ControlPosition property to specify the position of the control:
Example
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.TOP_CENTER
}
Try it Yourself »
Google Map - Custom Controls
Create a custom control that returns to London, used for the click event: (If the map is dragged):
Example
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 Yourself »