⚡ GMapsBook.com is crafted by Jozef Sorocin (🟢 Book a consulting hour) and powered by:

g-Xperts (Google Cloud & Business Profile Partner)
Spatialized.io (Elasticsearch & Google Maps consulting).
and Garages-Near-Me.com (Effortless parking across Germany)

Once you’ve grasped the concepts behind Dragging & Editing, you can delight your users by letting them draw on your Google map.

Drawing on the map canvas enables a variety of use cases. Your users may want to:

Emphasize custom region(s) by drawing polygons, just like on KW Honolulu.
“Clip” neighborhoods or buildings out of the basemap, just like with Felt.
Restrict area(s) of interest by freehand drawing, just like on Zillow or Compass.

As a matter of fact, being able to draw as part of an advanced search is one of the top community feature requests at Airbnb:

Original tweet link

Now, implementing user-friendly map drawing capabilities is daunting but not impossible.

In this chapter you’ll learn how to A) work with Google Maps’ Drawing Library and B) implement a custom, self-closing, freehand drawing tool.

Google’s Drawing Library

To use Google’s Drawing Library (i.e. the google.maps.drawing.DrawingManager class), you’ll first need to load this library as part of your initialization script:

< script async defer
	src=".../maps/api/js?key=YOUR_KEY_STARTING_WITH_AIza&libraries=drawing&callback=initMap">
</script>

From there, you can create a DrawingManager instance that’ll look like this by default:

The default , , , , and drawing modes.

The default MARKER, CIRCLE, POLYGON, POLYLINE, and RECTANGLE drawing modes.