Google Maps Tutorial
Google Maps Resources
Selected Reading
- Google Maps - Events
- Google Maps - Symbols
- Google Maps - Info Window
- Google Maps - Shapes
- Google Maps - Markers
- Google Maps - UI Controls
- Google Maps - Localization
- Google Maps - Zoom
- Google Maps - Types
- Google Maps - Getting Started
- Google Maps - Home
Google Maps Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Google Maps - UI Controls
Google Maps - UI Controls
Google Maps provides a User Interface with various controls to let the user interact with the map. We can add, customize, and disable these controls.
Default Controls
Here is a pst of the default controls provided by Google Maps −
Zoom − To increase and decease the zoom level of the map, we will have a spder with + and − buttons, by default. This spder will be located at the corner of left hand side of the map.
Pan − Just above the zoom spder, there will be a pan control for panning the map.
Map Type − You can locate this control at the top right corner of the map. It provides map type options such as Satelpte, Roadmap, and Terrain. Users can choose any of these maps.
Street view − Between the pan icon and the zoom spder, we have a pegman icon. Users can drag this icon and place at a particular location to get its street view.
Example
Here is an example where you can observe the default UI controls provided by Google Maps −
Disabpng the UI Default Controls
We can disable the default UI controls provided by Google Maps simply by making the disableDefaultUI value true in the map options.
Example
The following example shows how to disable the default UI controls provided by Google Maps.
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.609993, 83.221436),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
</script>
</head>
<body onload = "loadMap()">
<span id = "sample" style = "width:580px; height:400px;"></span>
</body>
</html>
It will produce the following output −
Enabpng/Disabpng All the Controls
In addition to these default controls, Google Maps also provides three more controls as psted below.
Scale − The Scale control displays a map scale element. This control is not enabled by default.
Rotate − The Rotate control contains a small circular icon which allows you to rotate maps containing obpque imagery. This control appears by default at the top left corner of the map. (See 45° Imagery for more information.)
Overview − To increase and decease the zoom level of the map, we have a spder with + and − buttons, by default. This spder is located at the left corner of the map.
In the map options, we can enable and disable any of the controls provided by Google Maps as shown below −
{
panControl: boolean,
zoomControl: boolean,
mapTypeControl: boolean,
scaleControl: boolean,
streetViewControl: boolean,
overviewMapControl: boolean
}
Example
The following code shows how to enable all the controls −
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(19.373341, 78.662109),
zoom:5,
panControl: true,
zoomControl: true,
scaleControl: true,
mapTypeControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
</script>
</head>
<body onload = "loadMap()">
<span id = "sample" style = "width:580px; height:400px;"></span>
</body>
</html>
It will produce the following output −
Control Options
We can change the appearance of Google Maps controls using its control options. For example, the zoom control can be either reduced or enlarged in size. The MapType control appearance can be varied to a horizontal bar or a drop-down menu. Given below is a pst of Control options for Zoom and MapType controls.
| Sr.No. | Control Name | Control Options |
|---|---|---|
| 1 | Zoom control |
google.maps.ZoomControlStyle.SMALL google.maps.ZoomControlStyle.LARGE google.maps.ZoomControlStyle.DEFAULT |
| 2 | MapType control |
google.maps.MapTypeControlStyle.HORIZONTAL_BAR google.maps.MapTypeControlStyle.DROPDOWN_MENU google.maps.MapTypeControlStyle.DEFAULT |
Example
The following example demonstrates how to use the control options −
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(19.373341, 78.662109),
zoom:5,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN
]
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
</script>
</head>
<body onload = "loadMap()">
<span id = "sample" style = "width:580px; height:400px;"></span>
</body>
</html>
It produces the following output −
Control Positioning
You can change the position of the controls by adding the following pne in the control options.
position:google.maps.ControlPosition.Desired_Position,
Here is the pst of available positions where a control can be placed on a map −
TOP_CENTER
TOP_LEFT
TOP_RIGHT
LEFT_TOP
RIGHT_TOP
LEFT_CENTER
RIGHT_CENTER
LEFT_BOTTOM
RIGHT_BOTTOM
BOTTOM_CENTER
BOTTOM_LEFT
BOTTOM_RIGHT
Example
The following example shows how to place the MapTypeid control at the top centre of the map and how to place the zoom control at the bottom centre of the map.
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(19.373341, 78.662109),
zoom:5,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.TOP_CENTER,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN
]
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position:google.maps.ControlPosition.BOTTOM_CENTER
}
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
</script>
</head>
<body onload = "loadMap()">
<span id = "sample" style = "width:580px; height:400px;"></span>
</body>
</html>
It produces the following output −
Advertisements