Skip to content
Related Articles

Related Articles

How to create a simple map using jQuery ?

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 08 Jun, 2022

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>
var 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 provide.

  • ROADMAP: This type of map shows the street view of the specific area. It is the default type map.
  • SATELLITE: This type of map shows the satellite images of the 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() {
            var CustomOp = {
                center:new google.maps.LatLng(
                        28.502212, 77.405603),
                zoom:17,
                mapTypeId:google.maps.MapTypeId.ROADMAP
            };
              
            // Map object
            var 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() {
            var CustomOp = {
                center:new google.maps.LatLng(
                        28.502212, 77.405603),
                zoom:17,
                mapTypeId:google.maps.MapTypeId.SATELLITE
            };
              
            // Map object
            var 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() {
            var CustomOp = {
                center:new google.maps.LatLng(
                        28.502212, 77.405603),
                zoom:17,
                mapTypeId:google.maps.MapTypeId.HYBRID
            };
              
            // Map object
            var 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() {
            var CustomOp = {
                center:new google.maps.LatLng(
                        28.502212, 77.405603),
                zoom:17,
                mapTypeId:google.maps.MapTypeId.TERRAIN
            };
              
            // Map object
            var 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:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!