How to create a simple map using jQuery ?
Last Updated :
06 Jul, 2023
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>
<!-- Add Google map API source -->
<script src=
"https://maps.googleapis.com/maps/api/js">
</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>
<!-- 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>
Output:
Example 2: SATELLITE
html
<!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() {
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>
<!-- 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>
Output:
Example 3: HYBRID
html
<!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() {
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>
<!-- 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>
Output:
Example 4: TERRAIN
html
<!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() {
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>
<!-- 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>
Output:
Similar Reads
How to create a news ticker using jQuery ? A news ticker is a text-based display either in the form of a graphic that displays news scrolling text running from up to down or right to left. In this article, we will use a jQuery plugin called easy-ticker to create a news ticker in a simple manner. To use this plugin, simply add the CDN link in
3 min read
How to create lists and links using jQuery EasyUI Mobile ? In this article we will learn how to design lists, group them and create links for easy navigation using jQuery EasyUI Mobile.EasyUI is a HTML5 framework for using user interface components based on jQuery, React, Angular and Vue technologies. It helps in building features for interactive web and mo
4 min read
How to create an HTML element using jQuery ? In this article, we will see how to create an HTML element using jQuery. To create and append the HTML element, we use the jQuery append() method. The jQuery append() method is used to insert some content at the end of the selected elements. Syntax: $(selector).append( content, function(index, html)
2 min read
How to create an area inside an image-map using HTML? To define clickable regions within an image map in an HTML document, use the <area> tag. This tag directs users to different links when they click on specific areas of the mapped image. It is nested within the <map> tag as a child element. In HTML, <area> is self-closing. Syntax:
1 min read
How to Create an Image Map in HTML ? An image map is a graphical representation that allows you to define clickable areas (or "hotspots") within an image. Each hotspot can be associated with a hyperlink, making different parts of the image interactive. Image maps are commonly used for navigation menus, interactive diagrams, and geograp
2 min read
How to use array with jQuery ? An array is a linear data structure. In JavaScript, arrays are mutable lists with a few built-in methods, we can define arrays using the array literal. The arrays can be used in the same way in jQuery as used in JavaScript. Syntax And Declaration:let arr1=[];let arr2=[1,2,3];let arr2=["India","usa",
1 min read