Google Maps API usage examples

9 Sep 2020

Hello! Now I would like to share Google Maps API usage examples. Previously I had some experience with it. Usually it was just attach google maps to website and add several markers. At the same time I was interested to try advanced features of Google Maps API. This post contains list of features with simple examples.

Receive API KEY, pricing

API KEY is required for Google Maps API usage. It's not very hard to receive API KEY, it is described in documentation. However, Google Cloud Platform Console interface seems to be quite complicated, so, external detailed tutorial might be also helpful. For those examples I enabled following APIs:

  • Directions API
  • Geocoding API
  • Maps Elevation
  • Maps Embed API
  • Maps JavaScript API
  • Places API

There is a pricing table. Features divided into 3 groups: Maps, Routes, Places. Every feature has own price. Prices described as dollars per 1000 requests. For example, Maps Static API costs 2$ per 1000 requests, Geocoding costs 5$ per 1000 requests.

There is $200 limit of free usage per month. After this limit you have to pay. THere is also $300 free demo for first 3 months. Finally, costs depends on use cases and amount of users. It seems like for most small/medium projects free limit would be enough.

Map and Markers

It is quite simple. For showing map we need to set center coordinates and zoom. Then one or more markers can be added. Information window can be added, Marker icon ca be changed.

Marker clustering

Marker clustering is used for displaying big number of markers. Cluster with number of markers displayed for small zoom. After click on cluster zoom increased and markers(or siblings clusters) are displayed.


Geocode can be used for address/zip to coordinate conversion. Then marker can be added to map using coordinate. There is also reverse geocode, that convert coordinate to address.


Autocomplete implements type-ahead for address or zipcode search box. Then user can see possible variants.


Directions can be used for building routes between different locations. Additional information and route details can be displayed on text panel. Directions also can be built with markers.


Elevation can be display for the specific coordinate. THere are also elevation paths supported.


Google Maps contains several layers: Google Maps Data layer, Heatmap layer, KML layer, Traffic layer, Transit layer, Bicycling layer. Layers can be enabled and configured or populated with some objects.


Google Maps API also support Street View panoramas. Street View image can be received by the specific coordinate. There are also heading and pitch parameters.


Google Maps API supports drawing of different forms. Most complicated and flexible is polygon, that can fill specific area by points. Rectangles and circles also supported. Forms and sizes can be changed. Rectangles can be used for drawing delivery zones etc.


Lines drawing also supported. It works quite similar to polygon, but line shouldn't be closed and there is no filled area. Lines can be edited, draw by points and decorated. For example, lines can be used for GPX track.

GPX track

Google Maps doesn't support GPX tracks natively. However, there is external library that implements this feature. Under hood, it uses simple forms, for example, polyline.

Out of scope

There are some additional features, that I didn't try by myself. They look quite interesting:

Demo project available on github. That's all for today. Thank you for your attention!