• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
info@dotnettec.com | +91-8800268750

DotNetTec

  • Home
  • Tutorials
    • Programming Language
      • C#
      • JavaScript
    • .Net Development
      • .NET Framework
      • ASP.NET Web Forms
      • MVC Architecture
      • Web API
      • .NET Core Framework
    • Front End Frameworks
      • JavaScript
      • HTML
    • Cloud Computing
      • Microsoft Azure
    • Database
      • SQL Server
    • Google Maps API
    • RPA
      • Blue Prism
      • UiPath
  • How to
  • Knowledge Base
  • Shop

How to draw a circle on Google Maps

November 6, 2019 by Ravi Kumar Leave a Comment

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#, Check if point inside polygon Google Maps JavaScript

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.

draw circle on google maps

A circle has two additional properties that 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 a 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.

Category iconGoogle Maps API,  How to Tag icondraw a circle on google maps,  how to draw a circle in google maps,  how to draw a radius circle on google maps

Subscribe to our blog.

Get the latest posts delivered right to your inbox.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Recent Posts

  • Google Maps Draw Polygon Get Coordinates
  • Check if point inside polygon Google Maps JavaScript
  • How to Create a Calendar Control in ASP.NET
  • Interview Etiquette Before, During and After
  • How to Attend Telephonic Interview Tips

Products

  • Online Shopping ASP.NET Project Source Code Online Shopping ASP.NET Project Source Code
    Rated 5.00 out of 5
    $69.00 $39.00
  • responsive-aspnet-mvc-grid-view ASP.NET MVC full Ajaxify and Bootstrap Grid with CRUD Operation
    Rated 4.67 out of 5
    $21.00 $9.00
  • eCommerce Website Source Code in ASP.NET eCommerce Website Source Code in ASP.NET $99.00
  • Hospital Management System Project ASP.Net Source Code
    Rated 5.00 out of 5
    $99.00
  • Whatsapp Bulk Message Sender Source Code WhatsApp Bulk Message Sender Source Code
    Rated 5.00 out of 5
    $69.00

Footer

.NET Developers Blog

Learn .NET, Programming Languages, Web App Development, APIs Development & Integration, Google Maps JavaScript APIs, and Cloud Services, through the latest articles, step-by-step tutorials, code examples, live projects, interview ebooks, and best practices.

Sitemap

  • About
  • Blog
  • Shop
  • Contact
  • Privacy Policy

Expertise

  • Web Development
  • Custom Software Development
  • Web API Development
  • Google Maps APIs

Newsletter

Get the latest news, posts, and announcements straight to your inbox.

Copyright © 2021 DotNetTec.