Aquileo | Google Maps Introduction

Google Maps is a web mapping service developed by Google, that provides interactive maps and satellite imagery. Users can find locations, get directions, view street-level imagery, and explore businesses and points of interest worldwide. Also, we can get the traffic information of a specific area or view street-level images of cities. Google Maps has a JavaScript API. This API is used to customize the map which displays the information.

Example:

javascript

<!DOCTYPE html>
<html>

<head>
    <title>
        Google Maps | Introduction
    </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:

Exaplaination:

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 linkhttps://accounts.google.com/v3/signin/identifier?continue=https%3A%2F%2Fconsole.cloud.google.com%2Fflows%2Fenableapi%3Fapiid%3Dmaps_backend%2Cgeocoding_backend%2Cdirections_backend%2Cdistance_matrix_backend%2Celevation_backend%2Cplaces_backend%26amp%3Breusekey%3Dtrue&followup=https%3A%2F%2Fconsole.cloud.google.com%2Fflows%2Fenableapi%3Fapiid%3Dmaps_backend%2Cgeocoding_backend%2Cdirections_backend%2Cdistance_matrix_backend%2Celevation_backend%2Cplaces_backend%26amp%3Breusekey%3Dtrue&ifkv=AdBytiPnqiKq_TVuYrvOZaOKhdpT9ypXqdCcV7BQOBO8uI_WSGkup7xf4XClIbA5rBXyB09byPRT&osid=1&passive=1209600&service=cloudconsole&flowName=WebLiteSignIn&flowEntry=ServiceLogin&dsh=S-1306644465%3A1752301763256530
- 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:
```
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);

Google Maps Introduction

Explore