Google Maps API Tutorials (JavaScript)

What is Google Maps API and How To Use JavaScript SDK?

Last modified on April 17th, 2023
Raja Tamil
Google Maps API Javascript

Google Maps API is a set of application programming interfaces that lets us talk to its services. It will allow us to build simple apps to very sophisticated location-based apps for Web, iOS, and Android.


Getting an API Key from Google Cloud Platform is the first step before using any of the Google Maps API Services.

  • Create An API Key
  • Enable Billing
  • Protect Your API Key & Libraries
  • Enable Desired Libraries

Maps API

Using Maps API, you can:

👉 Show Google Maps on the browser, iOS, or Android devices.

👉 Place or pin a Marker on the map when you want to indicate a specific geographic coordinate (latitude and longitude).

👉 Show an InfoWindow which is a popover so you can show more information about a place above the marker when clicked.

👉 Draw a polygon that covers a specific area on the map based on a number of coordinates specified in an ordered sequence.

👉 Create a polyline which is a path on the map based on a number of coordinates specified in an ordered sequence. The path line will be created between two lines, then the second to the third, and so on.

Geocoding API

  • Geocoding is a process of converting a street address to geographic coordinates (latitude & longitude).
  • Reverse Geocoding is the opposite, it coverts geographic coordinates to an actual human-readable address.
  • When you choose your own location from an app, such as a food delivery app, the app will have to convert the user coordinates that are coming from the device GPS to an actual human-readable address.

Places API

1. Nearby Search Request allows us to get different places based on:

  • location: could be either the user’s current location or any other location that you want to get nearby places from. 
  • Type: could be restaurants, bars, etc
  • radius: determines how far you want to get the places from.

The response object will have most of the information about places such as name, address and coordinates.

2. Text Search Request allows us to get different places based on the text string. For example: “restaurants in Toronto.”

3. Place Details Request will provide more information about a place such as a website address, phone number, opening hours for a week or reviews, and many more.

To get specific place information, you’ll need to use place_id that you can get from Nearby Search Request or Text Search Request.

4. Autocomplete API will allow you to show suggested street addresses in a drop-down list under the input field as the user types, which is very handy when a user denies sharing a location or location service is not supported by his/her browser or device.

Distance Matrix API

Distance Matrix API calculates the travel distance and time between two or more addresses based on transportation modes such as driving, walking, bicycling, and transit.

Directions API

Direction API allows you to calculate the travel distance and duration between two or more locations, similar to the Distance Matrix API.

Using it’s client-side library, we can actually create a direction path on the map based on various transportation modes.  

Geofencing API

Using the Geofencing API, we can detect a device when it crosses into a specific region or radius on the map. 

For example, when the food delivery driver enters the geofencing area of your house, your app will detect them and says the delivery driver is here.