draw a circle on google maps

Keywords | draw a distance circle on google mapsdraw a circle on google maps, draw a circle on google map, draw radius circle on google maps

Draw a Circle on Google Maps

A shape is an object on the map, tied to a latitude/longitude coordinate. So using Google Maps API V3 we can add various shapes to your map. There are following shapes to overlay on Google Maps such as – line, polygon, circle and rectangle.

In addition, the Google Maps JavaScript API includes a specific class for drawing circle on the map, to simplify their construction. 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

How to draw a distance circle on Google Maps

The following example demonstrates draw a circle on google maps and how to how to draw radius circle on google maps javascript API v3. Find the source code below:-

<!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 Code

What do you think?

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here