How to draw a circle on Google Maps

The following article will demonstrate to you how to draw a circle on Google Maps with a radius. The Google Maps API has several types of overlays that you can add programmatically such as markers, info-window, polylines, polygons, circles, and rectangles.

Keep reading on Google Maps Distance Matrix API Example C#, How to validate latitude and longitude value.

How to draw a radius circle on google maps

The Google Maps JavaScript v3 API includes a specific class for Circle objects, to simplify their construction. You can define custom colors, weights, and opacities for the edge of the circle (the stroke) and colors and opacities for the area within the circle (the fill). Colors should be indicated in the hexadecimal numeric HTML style.

A circle has two additional properties which define its shape:

Center specifies the google.maps.LatLng of the center of the circle.

Radius specifies the radius of the circle, in meters.

Find the below source code to draw a radius circle on map:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>How to draw a circle on Google Maps</title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR-KEY"></script>
    <script type="text/javascript">
        var circleClusterremove = [];
        var buffer_circle = null;

        // To load google map
        function initialize() {
            var mapOptions = {
                center: new google.maps.LatLng(19.110136, 72.881927),
                zoom: 11,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
        }

        // set onclick listener to pick a location on map
        function setListenerBuffer() {
            map.setOptions({ draggableCursor: 'crosshair' });
            google.maps.event.addListenerOnce(map, "click", function (latlng) {
                map.setOptions({ draggableCursor: '' });
                createCircle(latlng.latLng);
            });
            return false;
        }

        // Draw circle with in radius
        function createCircle(cntr) {
            var rad = "5"; // can input dynamically
            rad *= 1000; // convert to meters if in miles

            if (buffer_circle != null) {
                buffer_circle.setMap(null);
            }

            buffer_circle = new google.maps.Circle({
                center: cntr,
                radius: rad,
                strokeColor: "",
                strokeOpacity: 0.0,
                strokeWeight: 2,
                fillColor: "#FFD700",
                fillOpacity: 0.5,
                map: map
            });
            circleClusterremove.push(buffer_circle);
        }

        // To remove circle from google map
        function RemoveCircleBuffer() {
            try {
                for (var i = 0; i < circleClusterremove.length; i++) {
                    circleClusterremove[i].setMap(null);
                }
                circleClusterremove = [];
            }
            catch (Error) {
            }
        }
    </script>

    <style type="text/css">
        .create_Circle {
            background: url(buffer.png) no-repeat;
            width: 41px;
            margin: 0px 8px 0 0px;
            float: left;
            cursor: pointer;
            z-index: 2;
            height: 41px;
        }

        .remove_Circle {
            background: url(close.png) no-repeat;
            width: 41px;
            margin: 0px 8px 0 0px;
            float: left;
            cursor: pointer;
            z-index: 2;
            height: 41px;
        }
    </style>
</head>
<body onload="initialize();">
    <h1>Draw a Circle on Google Maps</h1>
    <a href="#" onclick="return setListenerBuffer();">Click here to pick a location on map</a><br />
    <a href="#" onclick="RemoveCircleBuffer();">Click here to remove circle from the map</a>
    <div id="map-canvas" style="width: 750px; height: 400px">
    </div>
</body>
</html>

Download Source Code

Conclusion

I hope you liked this article on how to draw a circle in google maps. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.