Skip to content

Instantly share code, notes, and snippets.

@Lmendev
Last active March 29, 2023 09:12
Show Gist options
  • Save Lmendev/3095f2e0d1dcbac504d3 to your computer and use it in GitHub Desktop.
Save Lmendev/3095f2e0d1dcbac504d3 to your computer and use it in GitHub Desktop.
Create a semicircle with Google Maps API v3. Coordinated and azimuth data are required. This is an adaptation of https://groups.google.com/forum/#!topic/google-maps-api/rKefiTZPXE8
const drawSector = ({ lat, lng, r, azimuth, width, map }) => {
const centerPoint = new google.maps.LatLng(lat, lng);
const PRlat = (r / 3963) * (180 / Math.PI); // using 3963 miles as earth's radius
const PRlng = PRlat / Math.cos(lat * (Math.PI / 180));
let theta = 0;
let gamma = (Math.PI / 180) * (azimuth + width / 2);
let PGpoints = [];
for (let a = 0; theta < gamma; a++) {
theta = (Math.PI / 180) * (azimuth - width / 2 + a);
let PGlat = lat + PRlat * Math.cos(theta);
let PGlon = lng + PRlng * Math.sin(theta);
PGpoints.push(new google.maps.LatLng(PGlat, PGlon));
}
PGpoints.push(centerPoint);
const polygon = new google.maps.Polygon({
path: PGpoints,
strokeColor: "#4B0082",
strokeOpacity: 1,
map
});
return polygon;
};
// Example
/*
drawSector({
lat: 49.994507,
lng: 36.145742,
r: 10,
azimuth: 10,
width: 45,
map
});
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment