Latest

random

Google Maps Draw Circle Given Radius

Draw Circle on Google Map JavaScript

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 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.
Find the google maps api examples and code snippet below :-
example creates circles on the map, google.maps.drawing.OverlayType.CIRCLE,Google Maps JavaScript API,draw shapes in maps using Google Maps API, Add a circle overlay to Google Maps API v3,draw cirlce around marker in google map api v3,Google Maps API Javascript V3
google.maps.drawing.OverlayType.CIRCLE
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Draw Circle Radius Google Maps</title>
    <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet" />
    <script type="text/javascript"  src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></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 = "8"; // 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: "#ADFF2F",
                fillOpacity: 0.5,
                map: map
            });
            circleClusterremove.push(buffer_circle);
        }

Remove Circle Google Maps
       // 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()">
    <form id="form1" runat="server">
   
    <div class="create_Circle" onclick="return setListenerBuffer();" title="To Draw Circle">
    </div>
    <a class="remove_Circle" onclick="RemoveCircleBuffer();" title="To Remove Circle"></a> <br />
   
    <div id="map-canvas" style="width: 1024px; height: 600px">
    </div>
    </form>
</body>
</html>

I hope you will enjoy the Google Maps API Developer tip while developing GIS web application. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome. Also If you like this article, don't forget to share this article with your friends and colleagues.

2 comments:

  1. where is the css file?
    href="/maps/documentation/javascript/examples/default.css" rel="stylesheet"

    ReplyDelete
  2. no need to add that url because I have put it on the default page. Use the following style: .create_Circle, .remove_Circle in your application.

    ReplyDelete

All Rights Reserved by Etechpulse © 2015 - 2016
Powered By Blogger

Contact Form

Name

Email *

Message *

Powered by Blogger.