user2937883 user2937883 - 1 month ago 19
Javascript Question

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');
}
});
}

Answer

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