Drawing a circle arc on google maps

Question

The idea is to draw an arc centered on a specific point using angles. Note: Not a chord, nor a sector, nor an area between a chord and an arc.

Memento: http://en.wikipedia.org/wiki/Arc_(geometry)

Full circle options:

- center at coordinates LatC,LngC - radius of 1 609 meters - start angle of 0 degrees - end angle of 360 degrees 

example http://jsfiddle.net/GGvQH/3/

 new google.maps.Circle({ center: new google.maps.LatLng(18.4894, 73.910158), radius: 1609, ... }); 

An arc of 180 ° (radius PI / 2), oriented to the north, will look like this:

  - center at coordinates LatC,LngC - radius of 1 609 meters - start angle of 270 degrees (9 o'clock) - end angle of 90 degrees (3 o'clock) 

First of all, I don’t want to build a polyline for each arc, using tons of points to get a smooth effect: you need to recalculate for each scale and it may cost resources ... or is it?

There is an idea with intersecting the polygons of the Google Maps API v3 - round sector ... has anyone seen a working jsfiddle? Note: http://jsfiddle.net/Morlock0821/4dRB2/1/ is very close to the arc, but I do not want a closed surface.

Another bearing idea ... but I'm reluctant to redefine the radius of the earth to get the tiny arc that I want. https://developers.google.com/maps/documentation/javascript/examples/geometry-headings (in this case, I only want the purple line, not the red one).

Any help would be greatly appreciated.

Answer 1

This is the code I'm using in this example :

 function drawArc(center, initialBearing, finalBearing, radius) { var d2r = Math.PI / 180; // degrees to radians var r2d = 180 / Math.PI; // radians to degrees var points = 32; // find the raidus in lat/lon var rlat = (radius / EarthRadiusMeters) * r2d; var rlng = rlat / Math.cos(center.lat() * d2r); var extp = new Array(); if (initialBearing > finalBearing) finalBearing += 360; var deltaBearing = finalBearing - initialBearing; deltaBearing = deltaBearing/points; for (var i=0; (i < points+1); i++) { extp.push(center.DestinationPoint(initialBearing + i*deltaBearing, radius)); bounds.extend(extp[extp.length-1]); } return extp; } 

Used like this, where startPoint is the beginning of the arc, endPoint is the end of the arc, and centerPoint is the center, but you can specify the center, angles and radius.

 var arcPts = drawArc(centerPoint, centerPoint.Bearing(startPoint), centerPoint.Bearing(endPoint), centerPoint.distanceFrom(startPoint)); var piePoly = new google.maps.Polygon({ paths: [arcPts], strokeColor: "#00FF00", strokeOpacity: 0.5, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35, map: map }); 

Helper functions may no longer be necessary if you enable geometry

 var EarthRadiusMeters = 6378137.0; // meters /* Based the on the Latitude/longitude spherical geodesy formulae & scripts at http://www.movable-type.co.uk/scripts/latlong.html (c) Chris Veness 2002-2010 */ google.maps.LatLng.prototype.DestinationPoint = function (brng, dist) { var R = EarthRadiusMeters; // earth mean radius in meters var brng = brng.toRad(); var lat1 = this.lat().toRad(), lon1 = this.lng().toRad(); var lat2 = Math.asin( Math.sin(lat1)*Math.cos(dist/R) + Math.cos(lat1)*Math.sin(dist/R)*Math.cos(brng) ); var lon2 = lon1 + Math.atan2(Math.sin(brng)*Math.sin(dist/R)*Math.cos(lat1), Math.cos(dist/R)-Math.sin(lat1)*Math.sin(lat2)); return new google.maps.LatLng(lat2.toDeg(), lon2.toDeg()); } // === A function which returns the bearing between two LatLng in radians === // === If v1 is null, it returns the bearing between the first and last vertex === // === If v1 is present but v2 is null, returns the bearing from v1 to the next vertex === // === If either vertex is out of range, returns void === google.maps.LatLng.prototype.Bearing = function(otherLatLng) { var from = this; var to = otherLatLng; if (from.equals(to)) { return 0; } var lat1 = from.latRadians(); var lon1 = from.lngRadians(); var lat2 = to.latRadians(); var lon2 = to.lngRadians(); var angle = - Math.atan2( Math.sin( lon1 - lon2 ) * Math.cos( lat2 ), Math.cos( lat1 ) * Math.sin( lat2 ) - Math.sin( lat1 ) * Math.cos( lat2 ) * Math.cos( lon1 - lon2 ) ); if ( angle < 0.0 ) angle += Math.PI * 2.0; if ( angle > Math.PI ) angle -= Math.PI * 2.0; return parseFloat(angle.toDeg()); } /** * Extend the Number object to convert degrees to radians * * @return {Number} Bearing in radians * @ignore */ Number.prototype.toRad = function () { return this * Math.PI / 180; }; /** * Extend the Number object to convert radians to degrees * * @return {Number} Bearing in degrees * @ignore */ Number.prototype.toDeg = function () { return this * 180 / Math.PI; }; /** * Normalize a heading in degrees to between 0 and +360 * * @return {Number} Return * @ignore */ Number.prototype.toBrng = function () { return (this.toDeg() + 360) % 360; };