Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Polygon Draw around center points

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 complete 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');
                }
            });
        }
like image 882
Int-khab Avatar asked Oct 30 '13 19:10

Int-khab


2 Answers

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

like image 161
O'Neill Avatar answered Oct 01 '22 22:10

O'Neill


I believe that cLng should be changed to:

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

(to get a perfect circle, that is)

like image 41
Reitenator Avatar answered Oct 01 '22 23:10

Reitenator