Draw polygon x meters around a point

google-maps, polygon

Solution

I ported this PHP function to calculate the location an arbitrary distance and bearing from a known location, to Javascript:

var EARTH_RADIUS_EQUATOR = 6378140.0;
var RADIAN = 180 / Math.PI;

function calcLatLong(longitude, lat, distance, bearing) 
{
     var b = bearing / RADIAN;
     var lon = longitude / RADIAN;
     var lat = lat / RADIAN;
     var f = 1/298.257;
     var e = 0.08181922;

     var R = EARTH_RADIUS_EQUATOR * (1 - e * e) / Math.pow( (1 - e*e * Math.pow(Math.sin(lat),2)), 1.5);    
     var psi = distance/R;
     var phi = Math.PI/2 - lat;
     var arccos = Math.cos(psi) * Math.cos(phi) + Math.sin(psi) * Math.sin(phi) * Math.cos(b);
     var latA = (Math.PI/2 - Math.acos(arccos)) * RADIAN;

     var arcsin = Math.sin(b) * Math.sin(psi) / Math.sin(phi);
     var longA = (lon - Math.asin(arcsin)) * RADIAN;

     return new GLatLng (latA, longA);
}

I have written a working example of this function that you can check out (source).

I use the Pythagorean Theorem to translate from a width of a square to a radius, if you want to use a simple 1000 meter radius from the center you can do that instead:

// this
var radius = 1000;
// instead of this
var radius = (Math.sqrt (2 * (width * width))) / 2;

Problem

How can I create a polygon(only a square in my case) around a given point(lat/lang) x meters around the given point. It's just a visual representation of a geofence but I dont need all the calculations whether a point is outside a geofence or not. I tried using the code below but its creating a rectangle instead of a square and I'm not even sure if the 1000 meter boudaries are being rendered correctly. ``` var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); map.addControl(new GSmallMapControl()); GEvent.addListener(map, 'click', function(overlay, latlng) { var lat = latlng.lat(); var lng = latlng.lng(); var height = 1000; //meters var width = 1000; //meters var polygon = new GPolygon( [ new GLatLng(lat + height / 2 * 90 / 10000000, lng + width / 2 * 90 / 10000000 / Math.cos(lat)), new GLatLng(lat - height / 2 * 90 / 10000000, lng + width / 2 * 90 / 10000000 / Math.cos(lat)), new GLatLng(lat - height / 2 * 90 / 10000000, lng - width / 2 * 90 / 10000000 / Math.cos(lat)), new GLatLng(lat + height / 2 * 90 / 10000000, lng - width / 2 * 90 / 10000000 / Math.cos(lat)), new GLatLng(lat + height / 2 * 90 / 10000000, lng + width / 2 * 90 / 10000000 / Math.cos(lat)) ], "#f33f00", 2, 1, "#ff0000", 0.2); map.addOverlay(polygon); }); ```

Original source