Google Map Control Set
Google Maps - Default Control Settings:
When using a standard Google Maps, its default settings are as follows:
1.Zoom - Show a slider to control the Zoom level of the map
2.PPan-The map shows a flat-bottom bowl-like control, click 4 corners to pan the map
3.MapType - Allows users to switch between map types (roadmap and satallite)
4. StreetView - Displayed as a street view villain icon, you can drag to a point on the map to open the street view
Google Maps - More Control Sets
In addition to the above default control set, Google also has:
.Scale - Show map scale
.Rotate - Shows a small circumference icon that can rotate the map
.verview Map - View the map from a wide area perspective
When creating a map, you can specify which control sets are displayed through the setting options or change the setting options of the map by calling setOptions().
Google Maps - Turn off the default control set
You may want to be able to turn off the default control set.
To turn off the default control set, set the property of the disableDefaultUI of the map to true:
Example
<html><head><scriptsrc="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"></div></body></html>Google Maps - Open all control sets
Some control sets appear on the map by default, while others do not, unless you set them.
Set the control to true to make it visible - Set the control to false to hide it.
The following example enables all controls:
Example
<html><head><scriptsrc="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"></div></body></html>Google Maps - Modify Control Set
Some map controls are configurable. Change the control set by crafting the control option field.
F For example, the option to modify the Zoom control is specified in zoomControlOptions. zoomControlOptions contains the following 3 options:
1.google.maps.ZoomControlStyle.SMALL - Show minimization zoom control
2.google.maps.ZoomControlStyle.LARGE - Display standard zoom sliding controls
3.google.maps.ZoomControlStyle.DEFAULT-Select the most suitable control based on device and map size
Example
<html><head><scriptsrc="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"></div></body></html>Note: If you need to modify a control, first turn on the control (set it to true).
Another control is the MapType control.
The MapType control can be displayed as one of the following style options:
1.google.maps.MapTypeControlStyle.HORIZONTAL_BAR, used to display a set of controls as buttons as shown in Google Maps in the horizontal bar.
2.google.maps.MapTypeControlStyle.DROPDOWN_MENU, for displaying a single button control so that you select the map type from the drop-down menu.
3.google.maps.MapTypeControlStyle.DEFAULT, used to display "default" behavior, which depends on the screen size and may change in later versions of the API.
Example
<html><head><scriptsrc="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"></div></body></html>Also, you can use the ControlPosition property to specify the location of the control:
<html><head><scriptsrc="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"></div></body></html>Google Maps - Custom Control Set
Create a custom control to return to London for clicking events: (if the map is dragged):
Example
<html><head><scriptsrc="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 Londonfunction 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"></div></body></html>The above is the information sorting out the Google Map control set. We will continue to add relevant knowledge in the future. I hope that friends who can help develop Google Map applications. Thank you for your support for this site!