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:
- Go to the below-mentioned link https://console.developers.google.com/flows/enableapi?apiid=maps_backend,geocoding_backend,directions_backend,distance_matrix_backend,elevation_backend,places_backend&reusekey=true
- Create a new project or select from your existing projects.
- Click Continue to enable the API.
- On the Credentials page, get an API key (and set the API key restrictions).
- Replace the value of the key parameter in the URL with your own 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