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:
Share your thoughts in the comments
Please Login to comment...