Google地图为用户界面提供了各种控件，让用户可以与地图进行互动.我们可以添加，自定义和禁用这些控件.
以下是Google Maps : 提供的默认控件列表;
缩放 : 要增加和减少地图的缩放级别，我们将使用带有&plus的滑块;和 : 按钮，默认情况下.此滑块位于地图左侧的角落.
Pan : 在缩放滑块上方，将有一个用于平移地图的平移控件.
地图类型 : 您可以在地图的右上角找到此控件.它提供地图类型选项，如卫星，路线图和地形.用户可以选择任何这些地图.
街景 : 在平移图标和缩放滑块之间，我们有一个街景小人图标.用户可以拖动此图标并放置在特定位置以获取其街景.
以下是一个示例，您可以观察Google地图提供的默认UI控件 :
我们只需在地图选项中将disableDefaultUI值设为true即可禁用Google Maps提供的默认UI控件。
以下示例显示了如何禁用Google Maps提供的默认UI控件。
<!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()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>除了这些默认控件外，Google Maps还提供了以下三个其他控件。
Scale :比例控件显示地图比例元素。 默认情况下不启用此控件。
Rotate : 旋转控件包含一个小的圆形图标，可让您旋转包含倾斜影像的地图。 默认情况下，此控件显示在地图的左上角。 （有关更多信息，请参见45°影像。）
Overview :为了增加和减少地图的缩放级别，我们有一个带有加号的滑块； 按钮，默认情况下。 该滑块位于地图的左上角。
在地图选项中，我们可以启用和禁用Google Maps提供的任何控件，如下所示；
{
panControl: boolean,
zoomControl: boolean,
mapTypeControl: boolean,
scaleControl: boolean,
streetViewControl: boolean,
overviewMapControl: boolean
}以下代码显示了如何启用所有控件:
<!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()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>我们可以使用其控件选项更改Google Maps控件的外观。 例如，缩放控件可以缩小或放大。 MapType控件的外观可以更改为水平栏或下拉菜单。 下面给出了Zoom和MapType控件的"控件"选项列表。
| Sr.No. | Control Name | Control Options |
|---|---|---|
| 1 | Zoom control |
|
| 2 | MapType control |
|
下面的示例演示如何使用控件选项:
<!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()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>您可以通过在控件选项中添加以下行来更改控件的位置。
position:google.maps.ControlPosition.Desired_Position,
这是可以在地图上放置控件的可用位置的列表:
TOP_CENTER
TOP_LEFT
TOP_RIGHT
LEFT_TOP
RIGHT_TOP
LEFT_CENTER
RIGHT_CENTER
LEFT_BOTTOM
RIGHT_BOTTOM
BOTTOM_CENTER
BOTTOM_LEFT
BOTTOM_RIGHT
下面的示例演示如何将MapTypeid控件放置在地图的顶部中心，以及如何将缩放控件放置在地图的底部中心。
<!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()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>
