Open In App

How to create a simple map using jQuery ?

Last Updated : 06 Jul, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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>
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=
    </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=
    </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=
    </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=
    </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:

 



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads