jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript.
What are Google Maps?
Google Map is a free web-based mapping service application and technology provided by Google. The application provides comprehensive information about geographical regions, street maps, and the route planner for traveling by car, foot, or public transportation Satellite views of the countries around the globe.
HTML Google Map can be used to display the maps on webpage. One can simply add a map HTML page.
Syntax:
<!DOCTYPE html>
<html>
<body>
<h1Map Example</h1>
<div id="map">Enter text</div>
</body>
Set the Map Size
Syntax:
<div id="map"
style="width:400px;height:400px;background:grey">
</div>
Create a function to set the map properties
The map properties can be set by creating a function. We have to use the functionalities of Google Maps API provided by a JavaScript library located at Google.
<script src=
"https://maps.googleapis.com/maps/api/js?callback=myMap">
</script>
Create A Map
- In the above example, we will use Google API to load google map.
<script src = "https://maps.googleapis.com/maps/api/js"></script>
- Following are the steps required to get an API key:
- To customize the maps:
let CustomOp = {
center: new google.maps.LatLng(28.502212, 77.405603),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
- In this case, CustomOp is an object that contains 3 options, centre, zoom, and maptypeid.
- centre: This property is used to set the specific point in maps.
- zoom: This property is used to specify the zoom level on a specific point.
- maptypeid: This property is used to specify the type of map. (ROADMAP, SATELLITE, HYBRID, TERRAIN)
To customize the Google map, there are four types of maps provided.
- ROADMAP: This type of map shows the street view of a specific area. It is the default type of map.
- SATELLITE: This type of map shows satellite images of a 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.
Example 1: ROADMAP
html
<!DOCTYPE html>
<html>
<head>
<title>
Google Maps | Types
</title>
<script src=
</script>
<script>
function GFG() {
let CustomOp = {
center: new google.maps.LatLng(
28.502212, 77.405603),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Map object
let 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
html
<!DOCTYPE html>
<html>
<head>
<title>
Google Maps | Types
</title>
<script src=
</script>
<script>
function GFG() {
let CustomOp = {
center: new google.maps.LatLng(
28.502212, 77.405603),
zoom: 17,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
// Map object
let 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
html
<!DOCTYPE html>
<html>
<head>
<title>
Google Maps | Types
</title>
<script src=
</script>
<script>
function GFG() {
let CustomOp = {
center: new google.maps.LatLng(
28.502212, 77.405603),
zoom: 17,
mapTypeId: google.maps.MapTypeId.HYBRID
};
// Map object
let 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
html
<!DOCTYPE html>
<html>
<head>
<title>
Google Maps | Types
</title>
<script src=
</script>
<script>
function GFG() {
let CustomOp = {
center: new google.maps.LatLng(
28.502212, 77.405603),
zoom: 17,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
// Map object
let 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:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
06 Jul, 2023
Like Article
Save Article