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:

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);