When i was working one of my client projects, there was a requirement to draw a Circle in Google Map. But the circle was quite different from regular Circle of Google Map Javascript API. In Google Map Javascript API the regular Circle has an option to fill the inside of circle with a color, but Requirement was inverse, means we have to fill the outside of the circle! My client wants everything outside of the circle to be filled in with the color and opacity that he wants to set.
After lots of searching in Google and reading Google Map Javascript API, when I didn't find any solution, then I started to build my own library to draw an InvertedCircle . I used google.maps.MVCObject class to give same functionality as regular Circle of Google Map Javascript API
It has following methods and events, Following table design has been copied from https://developers.google.com/maps/documentation/javascript/reference#Circle
Methods
| Methods | Return Value | Description |
|---|---|---|
getBounds() | LatLngBounds | Gets the LatLngBounds of this Circle. |
getCenter() | LatLng | Returns the center of this circle. |
getEditable() | boolean | Returns whether this circle can be edited by the user. |
getMap() | Map | Returns the map on which this circle is displayed. |
getRadius() | number | Returns the radius of this circle (in meters). |
getVisible() | boolean | Returns whether this circle is visible on the map. |
setCenter(center:LatLng) | None | Sets the center of this circle. |
setEditable(editable:boolean) | None | If set to true, the user can edit this circle by dragging the control points shown at the center and around the circumference of the circle. |
setMap(map:Map) | None | Renders the circle on the specified map. If map is set to null, the circle will be removed. |
setRadius(radius:number) | None | Sets the radius of this circle (in meters). |
setVisible(visible:boolean) | None | Hides this circle if set to false. |
Events
| Events | Arguments | Description |
|---|---|---|
center_changed | None | This event is fired when the circle's center is changed. |
radius_changed | None | This event is fired when the circle's radius is changed. |
visible_changed | None | This event is fired when the circle's visible is changed. |
You can find code in Github, url is https://github.com/raihan2006i/google-map-inverted-circle
Here is the screenshots of InvertedCircle, You can check Demo File
