I have tried lots but could not figure out the problem. I want to draw a polygon around specific lat,lng. The polygon will consists of 13 coordinates in specific radius.

1. Person inter the address and radius in text box.
2. Geo code get lat,lng of that address
3. Center the map to there.
4. Draw the polygon around that center point with radius
5. The polygon should consists of 13 coordinates

Code

function showAddress(address, miles) {
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({
                address : address
            }, function(results, status) {
                if(status == google.maps.GeocoderStatus.OK) {
                    //searchLocationsNear(results[0].geometry.location);
                    var cordinate = results[0].geometry.location;
                    //alert(cordinate);
                    var mapOptions = {
                        center : cordinate,
                        zoom : 8,
                        mapTypeId : google.maps.MapTypeId.ROADMAP,
                        overviewMapControl : true,
                        overviewMapControlOptions : {
                            opened : true,
                            position : google.maps.ControlPosition.BOTTOM_LEFT
                        }

                    };

                    //
                    //var address = document.getElementById("address").value;
                    var radius = 1;
                    var latitude = 23.1793013;
                    var longitude = 75.78490970000007;
                    //Degrees to radians
                    var d2r = Math.PI / 180;

                    //  Radians to degrees
                    var r2d = 180 / Math.PI;

                    // Earth radius is 3,963 miles
                    var cLat = (radius / 3963) * r2d;

                    var cLng = cLat / Math.cos(latitude * d2r);

                    //Store points in array
                    var points = [];
                    alert("declare array");

                    var bounds = new google.maps.LatLngBounds();

                    // Calculate the points
                    // Work around 360 points on circle
                    for(var i = 0; i < 13; i++) {

                        var theta = Math.PI * (i / 180);

                        // Calculate next X point
                        circleY = longitude + (cLng * Math.cos(theta));
                        //console.log("CircleY:"+circleY);
                        // Calculate next Y point
                        circleX = latitude + (cLat * Math.sin(theta));
                        //console.log("circleX:"+circleX);
                        // Add point to array
                        var aPoint = new google.maps.LatLng(circleX, circleY);
                        points.push(aPoint);
                        bounds.extend(aPoint);

                    }
                    points.push(points[0]);
                    //console.log(points);
                    //to plete circle

                    var colors = ["#CD0000", "#2E6444", "#003F87"];

                    var Polyline_Path = new google.maps.Polyline({
                        path : points,
                        strokeColor : colors[0],
                        // color of the outline of the polygon
                        strokeOpacity : 1,
                        // between 0.0 and 1.0
                        strokeWeight : 1,
                        // The stroke width in pixels
                        fillColor : colors[1],
                        fillOpacity : 0
                    });
                    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
                    Polyline_Path.setMap(map);


                } else {
                    alert(address + ' not found');
                }
            });
        }

I have tried lots but could not figure out the problem. I want to draw a polygon around specific lat,lng. The polygon will consists of 13 coordinates in specific radius.

1. Person inter the address and radius in text box.
2. Geo code get lat,lng of that address
3. Center the map to there.
4. Draw the polygon around that center point with radius
5. The polygon should consists of 13 coordinates

Code

function showAddress(address, miles) {
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({
                address : address
            }, function(results, status) {
                if(status == google.maps.GeocoderStatus.OK) {
                    //searchLocationsNear(results[0].geometry.location);
                    var cordinate = results[0].geometry.location;
                    //alert(cordinate);
                    var mapOptions = {
                        center : cordinate,
                        zoom : 8,
                        mapTypeId : google.maps.MapTypeId.ROADMAP,
                        overviewMapControl : true,
                        overviewMapControlOptions : {
                            opened : true,
                            position : google.maps.ControlPosition.BOTTOM_LEFT
                        }

                    };

                    //
                    //var address = document.getElementById("address").value;
                    var radius = 1;
                    var latitude = 23.1793013;
                    var longitude = 75.78490970000007;
                    //Degrees to radians
                    var d2r = Math.PI / 180;

                    //  Radians to degrees
                    var r2d = 180 / Math.PI;

                    // Earth radius is 3,963 miles
                    var cLat = (radius / 3963) * r2d;

                    var cLng = cLat / Math.cos(latitude * d2r);

                    //Store points in array
                    var points = [];
                    alert("declare array");

                    var bounds = new google.maps.LatLngBounds();

                    // Calculate the points
                    // Work around 360 points on circle
                    for(var i = 0; i < 13; i++) {

                        var theta = Math.PI * (i / 180);

                        // Calculate next X point
                        circleY = longitude + (cLng * Math.cos(theta));
                        //console.log("CircleY:"+circleY);
                        // Calculate next Y point
                        circleX = latitude + (cLat * Math.sin(theta));
                        //console.log("circleX:"+circleX);
                        // Add point to array
                        var aPoint = new google.maps.LatLng(circleX, circleY);
                        points.push(aPoint);
                        bounds.extend(aPoint);

                    }
                    points.push(points[0]);
                    //console.log(points);
                    //to plete circle

                    var colors = ["#CD0000", "#2E6444", "#003F87"];

                    var Polyline_Path = new google.maps.Polyline({
                        path : points,
                        strokeColor : colors[0],
                        // color of the outline of the polygon
                        strokeOpacity : 1,
                        // between 0.0 and 1.0
                        strokeWeight : 1,
                        // The stroke width in pixels
                        fillColor : colors[1],
                        fillOpacity : 0
                    });
                    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
                    Polyline_Path.setMap(map);


                } else {
                    alert(address + ' not found');
                }
            });
        }

• javascript
• google-maps-api-3

Share Improve this question Follow edited Oct 30, 2013 at 19:50 geocodezip 161k1414 gold badges227227 silver badges255255 bronze badges asked Oct 30, 2013 at 19:09 Int-khabInt-khab 15322 silver badges99 bronze badges 2

• See the drawCircle function on this map, change the number of points to 13 (from 32). It works for me (with 32 vertices). – geocodezip Commented Oct 30, 2013 at 20:22
• you can use turf: turfjs/docs/#circle – OhadR Commented Dec 23, 2021 at 13:54

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Replace i<13;i++ by

i<360;i+=360/13

this will work

thank

edit: the last point isn't needed since gmap will close it automagically

I believe that cLng should be changed to:

var cLng = cLat * Math.cos(latitude * d2r);

(to get a perfect circle, that is)