Introduction
The chapter demonstrates about the Google maps JavaScript API Controls and following are the concepts covered.
- Controls.
- Adding Map Controls.
- Options for Controls
Description
The user interaction with the map in Google Maps JavaScript API is done with the help of UI elements which are known as controls, though which the user can include some variation to control the map applications.
Following are the list of controls used in Google maps.
These map controls cannot be modified directly by the user but can modify in
- Map Type control Google Maps allow the users to choose the Map type like SATELLITE, ROADMAP, HYBRID or TERRAIN and the controls are available by default on the top left corner of the map.
- Street View control Google Maps allow the users to view the streets on map and the street view can be enabled by dragging a Pegman icon on to map, which is by default provided at the bottom right corner of the map.
- Zoom control User can change the Zoom levels by clicking the default buttons ‘+ and –‘provided at the bottom right corner of the map.
- Scale control Scale control is a default control which display a scale element of a map.
- Rotate control User can rotate a map using the rotate control option, which is a default control provided at the bottom right of the map.
- Fullscreen control User can view the map in full screen mode using the default full screen control option.
MapOptions filed in the application. Example 1
The example below demonstrate the Default UI controls displayed in Google maps API.
[c]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Default controls</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 17.3700, lng: 78.4800},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true&callback=initMap" async defer></script>
</body>
</html>
[/c]
Example 2
If the user want to disable the Google Maps API default UI controls can do by adding a property called
disableDefaultUI in the MapOptions object filed and ensure the property set to be true.
The example below demonstrate the code for disabling the entire UI Controls.
[c]
!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Disabling the default UI controls</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {lat: 17.3700, lng: 78.4800},
disableDefaultUI: true
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true&callback=initMap" async defer>
</script>
</body>
</html>
[/c] Description
The controls can be add, remove or modified by the user, before editing the controls ensure that the future updates do not disturb this controls behavior.
In Google Maps API applications some controls appear by default on the map and whereas other controls appear on the user request.
The
MapOption object in the application used to remove or add the controls on the map. To make the controls visible, set the option to be true and for hiding the controls set the option as false.
The following are the some of the MapOptions object fields used in Google Maps API Controls.
[c]
{
zoomControl: boolean,
mapTypeControl: boolean,
streetViewControl: boolean,
fullscreenControl: Boolean,
scaleControl: boolean,
rotateControls: boolean
}
[/c] Example
The example below demonstrate the code, which hide the scale view and display the street view and zoom control on the map.
[c]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Adding controls to the map</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {lat: 17.3700, lng: 78.4800},
zoomControl: true,
streetViewControl: true,
scaleControl: false
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true&callback=initMap" async defer></script>
</body>
</html>
[/c]
Description
Google Maps API provide some Options to the user to change or edit the behavior of the controls using
mapTypeControlOptions filed.
The controls like drop down menu or horizontal bar can be modified using the control options. Following are the style options in which the Map Type control may appear.
google.maps.MapTypeControlStyle.DEFAULTThe controller default behavior gets displayed by using default control option. The default option depends on size of the screen and version of the API.
google.maps.MapTypeControlStyel.HORIZONTAL_BARUsed to display the horizontal bar on the map which contains some control buttons.
google.maps.MapTypeControlStyle.DROPDOWN_MENUUsed to display the drop down menu on the map which contains a single control button allowing the user to select the map type.
Example
The example below demonstrate the code for managing the control options style.
[c]<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Control style options</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 17.3700, lng: 78.4800},
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.SATELLITE,
google.maps.MapTypeId.HYBRID,
google.maps.MapTypeId.TERRAIN
]
}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true&callback=initMap" async defer>
</script>
</body>
</html>[/c]
Description
Google Maps support the Control Options positioning. User can position the control options at different places on the map by using the
ControlPosition property.
The following are the positions for Control Options in Google Maps.BOTTOM_RIGHTUsed to place the control options at bottom right corner of the map.
BOTTOM_CENTERUsed to place the control options at maps bottom center.
BOOTOM_LEFTUsed to place the control options at bottom left corner of the map.
TOP_RIGHTUsed to place the control options at the top right corner of the map.
TOP_CENTERUsed to place the control options at the maps top centre.
TOP_LEFTUsed to place control options at the top left corner of the map.
RIGHT_BOTTOMUsed to place the control options above theBOTTOM_RIGHTelements at bottom right of the map.
LEFT_BOTTOMUsed to place the control options above theBOTTOM_LEFTelements at bottom left of the map.
RIGHT_TOPUsed to place the control options below theTOP_RIGHTelements at top right corner of the map.
LEFT_TOPUsed to place the control options below theTOP_LEFTelements at top left corner of the map.
RIGHT_CENTERUsed to place the control options in betweenBOTTOM_RIGHTandTOP_RIGHTpositions.
LEFT_CENTERUsed to place the control options in betweenBOTTOM_LEFTandTOP_LEFTpositions.
Example
The example below demonstrate the code for positioning the control options in Google Maps API.
[c]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Positioning Control Options</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 17.3700, lng: 78.4800},
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.RIGHT_CENTER,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.SATELLITE,
google.maps.MapTypeId.HYBRID,
google.maps.MapTypeId.TERRAIN,
]
},
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: true,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
fullscreenControl: true
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true&callback=initMap" async defer>
</script>
</body>
</html>
[/c]
Key Points
- The appearance or behavior of controls in Google Maps API is same in both the desktop and mobile devices.
- User should ensure that appropriate MapOptions value to be true before modifying the control options.
Programming
Tips
- Copy the API key obtained from Google Maps API and paste using the JavaScript tag in the code for loading Maps.
- Set the required Map Properties for better output.
- Make sure the latitude and longitudes of the required location mentioned to be correct.
- Use
MapOptionobject filed for modifying are positioning the control options on a map.