Google Maps | Types
要自定义 Google 地图，提供了四种类型的地图。
- ROADMAP：这种类型的地图显示特定区域的街景。它是默认类型映射。
- 卫星：这种类型的地图显示特定区域的卫星图像。
- 混合：这种类型的地图显示特定区域的主要街道。
- 地形：这种类型的地图显示地形和植被。
语法：
var CustomOp= {
mapTypeId:google.maps.MapTypeId.ROADMAP | SATELLITE | HYBRID | TERRAIN
};
示例 1：路线图
<!DOCTYPE html>
<html>
<head>
<title>
Google Maps | Types
</title>
<!-- Add Google map API source -->
<script src =
" https://maps.googleapis.com/maps/api/js">
</script>
<script>
function GFG() {
var CustomOp = {
center:new google.maps.LatLng(
28.502212, 77.405603),
zoom:17,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
// Map object
var map = new google.maps.Map(
document.getElementById("DivID"),
CustomOp
);
}
</script>
</head>
<!-- Function that execute when page load -->
<body onload = "GFG()">
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>Google Maps</h3>
<!-- Basic Container -->
<div id = "DivID" style =
"width:400px; height:300px;">
</div>
</center>
</body>
</html>
输出：
示例 2：卫星
<!DOCTYPE html>
<html>
<head>
<title>
Google Maps | Types
</title>
<!-- Add Google map API source -->
<script src =
" https://maps.googleapis.com/maps/api/js">
</script>
<script>
function GFG() {
var CustomOp = {
center:new google.maps.LatLng(
28.502212, 77.405603),
zoom:17,
mapTypeId:google.maps.MapTypeId.SATELLITE
};
// Map object
var map = new google.maps.Map(
document.getElementById("DivID"),
CustomOp
);
}
</script>
</head>
<!-- Function that execute when page load -->
<body onload = "GFG()">
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>Google Maps</h3>
<!-- Basic Container -->
<div id = "DivID" style =
"width:400px; height:300px;">
</div>
</center>
</body>
</html>
输出：
示例 3：混合
<!DOCTYPE html>
<html>
<head>
<title>
Google Maps | Types
</title>
<!-- Add Google map API source -->
<script src =
" https://maps.googleapis.com/maps/api/js">
</script>
<script>
function GFG() {
var CustomOp = {
center:new google.maps.LatLng(
28.502212, 77.405603),
zoom:17,
mapTypeId:google.maps.MapTypeId.HYBRID
};
// Map object
var map = new google.maps.Map(
document.getElementById("DivID"),
CustomOp
);
}
</script>
</head>
<!-- Function that execute when page load -->
<body onload = "GFG()">
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>Google Maps</h3>
<!-- Basic Container -->
<div id = "DivID" style =
"width:400px; height:300px;">
</div>
</center>
</body>
</html>
输出：
示例 4：地形
<!DOCTYPE html>
<html>
<head>
<title>
Google Maps | Types
</title>
<!-- Add Google map API source -->
<script src =
" https://maps.googleapis.com/maps/api/js">
</script>
<script>
function GFG() {
var CustomOp = {
center:new google.maps.LatLng(
28.502212, 77.405603),
zoom:17,
mapTypeId:google.maps.MapTypeId.TERRAIN
};
// Map object
var map = new google.maps.Map(
document.getElementById("DivID"),
CustomOp
);
}
</script>
</head>
<!-- Function that execute when page load -->
<body onload = "GFG()">
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>Google Maps</h3>
<!-- Basic Container -->
<div id = "DivID" style =
"width:400px; height:300px;">
</div>
</center>
</body>
</html>
输出：
注：本文由VeryToolz翻译自 Google Maps | Types ，非经特殊声明，文中代码和图片版权归原作者 Vijay Sirra所有，本译文的传播和使用请遵循“署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)”协议。