Google Maps Control Set
Google MapsControl Set
A Google Map - Default Control Set Settings:
Google Maps - Default Widget Set Settings:
When using a standard Google Map, its default settings are as follows:
.Zoom-Displays a slider to control the Zoom level of the map
.PPan-The map displays a flat-bottomed bowl-like control. Click on the 4 corners to pan the map.
.MapType - allows the user to switch between map types (roadmap and satallite)
.StreetView - displays as a Pegman icon , can be dragged to a certain point on the map to open Street View
Google Maps - More control sets
In addition to the above default control sets, Google also has ：
.Scale-Display the map scale
.Rotate-Display a small circle icon to rotate the map
.verview Map-overlooking the map from a wide-area perspective
When creating a map, you can specify which control sets are displayed by setting options or by calling setOptions() Change map settings.
Google Maps - Turn off the default set of controls
You may want to be able to turn off the default set of controls.
To turn off the default control set, set the map's disableDefaultUI property to true:
Instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
disableDefaultUI:true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>Run Example»
Click the "Run Instance" button to view the online instance
Google Maps - Open all control sets
Some control sets are displayed on the map by default on, while the others won't unless you set them.
Set the control to true to make it visible - set the control to false to hide it.
The following example turns on all controls:
Instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>Run instance»
Click" Run Instance" button to view an online instance
Google Maps - Modify Control Set
Some map controls are configurable. Change the set of controls by specifying control option fields.
F For example, the options for modifying the Zoom control are specified in zoomControlOptions. zoomControlOptions contains the following 3 options:
.google.maps.ZoomControlStyle.SMALL-Display the minimized zoom control
.google.maps. ZoomControlStyle.LARGE - Displays the standard zoom sliding control
.google.maps.ZoomControlStyle.DEFAULT - Selects the most appropriate control based on device and map size
Instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
zoomControl:true,
zoomControlOptions: {
style:google.maps.ZoomControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>Run instance»
Click the "Run instance" button to view the online instance
Note: If you need to modify a control, first enable the control (set it to true).
Another control is the MapType control.
MapType control can be displayed as one of the following style options:
- ##google.maps.MapTypeControlStyle.HORIZONTAL_BAR, used to display a group of controls in a horizontal bar as such Button shown in Google Maps.
- google.maps.MapTypeControlStyle.DROPDOWN_MENU displays a single button control that lets you select a map type from a drop-down menu.
- google.maps.MapTypeControlStyle.DEFAULT, used to display the "default" behavior, which depends on screen size and may change in future versions of the API.
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>Run Instance»Click the "Run Instance" button to view the online instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.TOP_CENTER
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>Run the instance»Click the "Run Instance" button to view the online instance
Google Maps - Custom Control SetCreate a custom control that returns to London, for click event: (If the map is dragged):
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var map;
var london = new google.maps.LatLng(51.508742,-0.120850);
// Add a Home control that returns the user to London
function HomeControl(controlDiv, map) {
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);
// Setup click-event listener: simply set the map to London
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setCenter(london)
});
}
function initialize() {
var mapDiv = document.getElementById('googleMap');
var myOptions = {
zoom: 12,
center: london,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapDiv, myOptions);
// Create a DIV to hold the control and call HomeControl()
var homeControlDiv = document.createElement('div');
var homeControl = new HomeControl(homeControlDiv, map);
// homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>Run Instance»Click the "Run Instance" button to view Online Example
Google Maps - Control Set Reference ManualGoogle Maps API Reference Manual.
