Adding circles/rectangles to maps

Circles and rectangles are similar to polygons in that they have stroke and fill colors, weights, and opacities. The main difference between them and polygons is in defining the geometry. As seen in the previous recipes, the PolygonOptions class has a path parameter that consists of an array of LatLng objects. On the other side, the CircleOptions class has the center and radius parameters, and the RectangleOptions class has bounds parameters for defining the geometry of the Circle and Rectangle classes respectively.

In this recipe, we will go through adding circles according to the population of cities and a rectangle to map bounding to Turkey. The result map will show the bounding box of Turkey and major cities' population in a graph.

Getting ready

In this recipe, we will use the first recipe defined in Chapter 1, Google Maps JavaScript API Basics, as a template in order to skip map creation.

You can find the source code at Chapter 3/ch03_circle_rectangle.html...