JQuery is a well-liked interactive component in the JavaScript library that makes it easier to create online web apps. It can be made interactive with plugins and is simple and configurable. It is the best option for producing simplistic maps that lack advanced capabilities because it is compatible with all popular web browsers.
Additionally, it is the most used tool for creating google maps because a basic map can be quickly and easily created with jQuery to add visual appeal to your website and improve user experience.
Approach – 1
Algorithm
Step-1 Create your map’s HTML. For this, you’ll need a div section to hold the map and an id to refer to it in your jQuery method.
Step-2 Map styling is done so add some CSS to the div. Start with setting some basic properties of the map container such as adjusting width and height to any desired values.
Step-3 Include jQuery and the Google Maps API in your HTML. Add the links of jQuery and API to include them directly in your code.
Step-4 Initialize the map in the script section to make it operational.
Step-5 End your google map coding by specifying markers of the map to show points of user interest on the page.
Example
<!DOCTYPE html>
<html>
<head>
<title>
Google Map
</title>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function abcmap() {
var mapobj = {
center:new google.maps.LatLng(
1, 1),
zoom:17,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
// Map object
var map = new google.maps.Map(
document.getElementById("mapdiv"),
mapobj
);
}
</script>
</head>
<body onload = "abcmap()">
<center>
<h2 style="color:skyblue">
<b><u>Explore The World</u></b>
</h2>
<h3>Google Maps</h3>
<div id = "mapdiv" style =
"width:500px; height:350px;">
</div>
</center>
</body>
</html>
Approach – 2
In this example, we will create a hybrid Google map using JQuery. The hybrid map is created by specifying a map type. The map type is specified in the script section. The code to create a hybrid map is almost similar to a simple map. You can make a few changes in the script section of the above example to change the map type.
Step-1 Create your map’s HTML.
Step-2 Style the map and set its dimensions.
Step-3 Include jQuery and the Google Maps API in your HTML.
Step-4 Add Google map code by specifying markers of the map.
Example
<!DOCTYPE html>
<html>
<head>
<title>
Google Maps Hybrid
</title>
<!-- Add Google map API source -->
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function hybridmap() {
var CustomOp = {
center:new google.maps.LatLng(
10, 1),
zoom:3,
mapTypeId:google.maps.MapTypeId.HYBRID
};
// Map object
var map = new google.maps.Map(
document.getElementById("mapid"),
CustomOp
);
}
</script>
</head>
<!-- Function that execute when page load -->
<body onload = "hybridmap()">
<center>
<h1 style="color:skyblue">
Explore The World
</h1>
<h3>Google Maps</h3>
<!-- Basic Container -->
<div id = "mapid" style =
"width:500px; height:200px;">
</div>
</center>
</body>
</html>
Conclusion
A straightforward map made with jQuery is a fantastic way to have an interactive component on your website. You may make a simple map with markers that is both practical and aesthetically pleasing by following these instructions. After you’ve mastered the fundamentals, you may explore the Google Maps API’s more complex capabilities to produce maps that are even more stunning.