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.

• Documentation
• Example from demo project с несколькими маркерами.

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.

• Documentation
• Example from demo project
• Example with big umber of markers
• Example from 9Round project.

Geocode

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.

• Geocoding
• Reverse Geocoding
• Example from demo project

Autocomplete

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

• Documentation
• Example from demo project

Directions

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.

• Simple example
• Example with text panel
• Examnple with markers
• Example from demo project

Elevation

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

• Documentation
• Elevation paths
• Example from demo project

Layers

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.

• Описание слоев
• Traffic layer
• Transit layer
• Bicycling layer
• Example from demo project

Streetview

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.

• Documentation
• Example from demo project

Polygon

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.

• Simple polygon
• Polygon with hole
• Circle
• Rectangle
• Editable rectangle
• Draggable polygon
• Example from demo project

Polyline

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.

• Line
• Editable line
• Draw polyline by points
• Line with arrow
• Dashed line
• Example from demo project

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.

• Manual
• Exterrnal library
• Example from demo project

Out of scope

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

• Heatmaps layer
• Puzzles game from polygons
• Free drawing
• Moving throw street views
• Import from GeoJson
• Import from GeoRSS

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