So I used the solution from this thread How to draw a polygon around a polyline in JavaScript? to solve my problem that I needed to have a radius drawn along a path. However it looks lopsided, like an oval when I use this method, even though on the thread the result doesn't look like this. I'm not using directions to generate my points, I already have an array of points that I'm passing to the function
here is what it currently looks like
function drawRadius(map, path, radius, factor)
{
let radial = [];
overviewPathGeo = [];
for (var i = 0; i < path.length; i++) {
overviewPathGeo.push(
[path[i].lng, path[i].lat]
);
}
var distance = (radius/1000.0) / 111.12, // Roughly 10km
geoInput = {
type: "LineString",
coordinates: overviewPathGeo
};
var geoReader = new jsts.io.GeoJSONReader(),
geoWriter = new jsts.io.GeoJSONWriter();
var geometry = geoReader.read(geoInput).buffer(distance);
var polygon = geoWriter.write(geometry);
var oLanLng = [];
var oCoordinates;
oCoordinates = polygon.coordinates[0];
for (i = 0; i < oCoordinates.length; i++) {
var oItem;
oItem = oCoordinates[i];
oLanLng.push(new google.maps.LatLng(oItem[1], oItem[0]));
}
var polygone = new google.maps.Polygon({
paths: oLanLng,
map:map
});
radial.push(polygone);
distance = ((radius*factor)/1000.0) / 111.12, // Roughly 10km
geoInput = {
type: "LineString",
coordinates: overviewPathGeo
};
geoReader = new jsts.io.GeoJSONReader(),
geoWriter = new jsts.io.GeoJSONWriter();
geometry = geoReader.read(geoInput).buffer(distance);
polygon = geoWriter.write(geometry);
oLanLng = [];
oCoordinates;
oCoordinates = polygon.coordinates[0];
for (i = 0; i < oCoordinates.length; i++) {
var oItem;
oItem = oCoordinates[i];
oLanLng.push(new google.maps.LatLng(oItem[1], oItem[0]));
}
polygone = new google.maps.Polygon({
paths: oLanLng,
map:map
});
radial.push(polygone);
return radial;
}