Google Maps Introduction (original) (raw)

Last Updated : 12 Jul, 2025

**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 `

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

GeeksforGeeks

    <h3>Google Maps</h3>

    <!-- Basic Container -->
    <div id="DivID" style="width:400px; height:300px;">
    </div>
</center>

`

**Output:

**Exaplaination:

• In the above example, we will use Google API to load google map. **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);