Skip to content
Related Articles

Related Articles

How to create a simple map using jQuery ?
  • Last Updated : 27 Oct, 2020

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.

    Approach:

  • 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 custmize the maps:
    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 create a map object we will use the following code:
    var map = new google.maps.Map(document.getElementById("DivID"), CustomOp);

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




<!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




<!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




<!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




<!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 :