Google Maps | Types
Last Updated :
13 Mar, 2020
To customize the Google map, there are four types of maps provide.
- ROADMAP: This type of map shows the street view of the specific area. It is the default type map.
- SATELLITE: This type of map shows the satellite images of the specific area.
- HYBRID: This type of map shows the major streets of the specific area.
- TERRAIN: This type of map shows the terrain and vegetation.
Syntax:
var CustomOp= {
mapTypeId:google.maps.MapTypeId.ROADMAP | SATELLITE | HYBRID | TERRAIN
};
Example 1: ROADMAP
<!DOCTYPE html>
<html>
<head>
<title>
Google Maps | Types
</title>
<script src =
</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>
<body onload = "GFG()">
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>Google Maps</h3>
<div id = "DivID" style =
"width:400px; height:300px;">
</div>
</center>
</body>
</html>
|
Output:
Example 2: SATELLITE
<!DOCTYPE html>
<html>
<head>
<title>
Google Maps | Types
</title>
<script src =
</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>
<body onload = "GFG()">
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>Google Maps</h3>
<div id = "DivID" style =
"width:400px; height:300px;">
</div>
</center>
</body>
</html>
|
Output:
Example 3: HYBRID
<!DOCTYPE html>
<html>
<head>
<title>
Google Maps | Types
</title>
<script src =
</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>
<body onload = "GFG()">
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>Google Maps</h3>
<div id = "DivID" style =
"width:400px; height:300px;">
</div>
</center>
</body>
</html>
|
Output:
Example 4: TERRAIN
<!DOCTYPE html>
<html>
<head>
<title>
Google Maps | Types
</title>
<script src =
</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>
<body onload = "GFG()">
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>Google Maps</h3>
<div id = "DivID" style =
"width:400px; height:300px;">
</div>
</center>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...