How to draw 2 concentric arcs in googlemap

Question

I want to draw 2 concentric arcs in googlemap and color only area 'B'. Please refer the pic

But as it shows i am not been able to discard area 'A'. Can somebody share some codesnippet to achieve this. Referred How to split circle in to the sectors in google maps? for current implementation.

function initialize() {
    var gm = google.maps, centerPt = new gm.LatLng(19.424949166667, 99.17041888889), map = new gm.Map(
            document.getElementById('map_container'), {
                mapTypeId : gm.MapTypeId.ROADMAP,
                zoom : 16,
                center : centerPt
            }), 

    slices = [ [ 30.0, 82.0, 'red' ],
    ], 
    polys = [], radiusMeters = [50,100];
    for(var j=0;j<radiusMeters.length;j++){
        for ( var i = 0; i < slices.length; i++) {
            var path = getArcPath(centerPt, radiusMeters[j], slices[i][0],
                    slices[i][1]);
            path.unshift(centerPt);
            path.push(centerPt);

            var poly = new gm.Polygon({
                path : path,
                map : map,
                fillColor : slices[i][2],
                fillOpacity : 0.35,
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,

            });
            polys.push(poly);
        }// End of Inner for loop
    }// End of for loop
}

function getArcPath(center, radiusMeters, startAngle, endAngle,
        direction) {
    var point, previous, atEnd = false, points = Array(), a = startAngle;
    while (true) {
        point = google.maps.geometry.spherical.computeOffset(center,
                radiusMeters, a);
        points.push(point);
        if (a == endAngle) {
            break;
        }
        a++;
        if (a > 360) {
            a = 1;
        }
    }
    if (direction == 'counterclockwise') {
        points = points.reverse();
    }
    return points;
}

Answer 1

Draw 2 arcs and connect them with polylines:

var startPoint = new google.maps.LatLng(50.698129,13.982184);
var endPoint = new google.maps.LatLng(50.697748,13.999179);
var centerPoint = new google.maps.LatLng(50.68504754096478, 13.990276157855988);
var midStartLeg = google.maps.geometry.spherical.interpolate(centerPoint, startPoint, 0.5);
var midEndLeg = google.maps.geometry.spherical.interpolate(centerPoint, endPoint, 0.5);

var arcPts = drawArc(centerPoint, google.maps.geometry.spherical.computeHeading(centerPoint, startPoint), google.maps.geometry.spherical.computeHeading(centerPoint, endPoint), google.maps.geometry.spherical.computeDistanceBetween(centerPoint, startPoint), -1.0);

var littleArcPts = drawArc(centerPoint, google.maps.geometry.spherical.computeHeading(centerPoint, startPoint), google.maps.geometry.spherical.computeHeading(centerPoint, endPoint), google.maps.geometry.spherical.computeDistanceBetween(centerPoint, midStartLeg), -1.0);
littleArcPts = littleArcPts.reverse();
arcPts = arcPts.concat(littleArcPts);
  
var piePoly = new google.maps.Polygon({
  paths: [arcPts],
  strokeColor: "#00FF00",
  strokeOpacity: 0.5,
  strokeWeight: 2,
  fillColor: "#FF0000",
  fillOpacity: 0.35,
  map: map
});

proof of concept fiddle

code snippet:

function initialize() {
  var myOptions = {
    zoom: 15,
    center: new google.maps.LatLng(50.68681982238762, 14.000144215759285),
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

  bounds = new google.maps.LatLngBounds();

  google.maps.event.addListener(map, 'click', function(event) {
    alert(event.latLng);
    infowindow.close();
  });


  var startPoint = new google.maps.LatLng(50.698129, 13.982184);
  var endPoint = new google.maps.LatLng(50.697748, 13.999179);
  var centerPoint = new google.maps.LatLng(50.68504754096478, 13.990276157855988);
  var midStartLeg = google.maps.geometry.spherical.interpolate(centerPoint, startPoint, 0.5);
  var midEndLeg = google.maps.geometry.spherical.interpolate(centerPoint, endPoint, 0.5);

  var arcPts = drawArc(centerPoint, google.maps.geometry.spherical.computeHeading(centerPoint, startPoint), google.maps.geometry.spherical.computeHeading(centerPoint, endPoint), google.maps.geometry.spherical.computeDistanceBetween(centerPoint, startPoint), -1.0);
  bounds.extend(midEndLeg);
  var littleArcPts = drawArc(centerPoint, google.maps.geometry.spherical.computeHeading(centerPoint, startPoint), google.maps.geometry.spherical.computeHeading(centerPoint, endPoint), google.maps.geometry.spherical.computeDistanceBetween(centerPoint, midStartLeg), -1.0);
  littleArcPts = littleArcPts.reverse();
  arcPts = arcPts.concat(littleArcPts);
  // arcPts.push(midStartLeg);

  var arcPtsB = drawArc(centerPoint, -30, +30, google.maps.geometry.spherical.computeDistanceBetween(centerPoint, startPoint));
  // add the start and end lines
  // arcPtsB.push(centerPoint);
  arcPtsB.push(google.maps.geometry.spherical.computeOffset(centerPoint, google.maps.geometry.spherical.computeDistanceBetween(centerPoint, startPoint), -30));

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

}
google.maps.event.addDomListener(window, 'load', initialize);
// from http://en.wikipedia.org/wiki/Earth_radius
/*
/ Equatorial radius
/ The Earth's equatorial radius a, or semi-major axis, is the distance from its center to the equator and equals 6,378.1370 km (?3,963.191 mi; ?3,443.918 nmi).
*/
var EarthRadiusMeters = 6378137.0; // meters

var infowindow = new google.maps.InfoWindow({
  size: new google.maps.Size(150, 50)
});


function createMarker(latlng, html) {
  var contentString = html;
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    draggable: true,
    zIndex: Math.round(latlng.lat() * -100000) << 5
  });
  bounds.extend(latlng);
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString);
    infowindow.open(map, marker);
  });
  google.maps.event.addListener(marker, 'dragend', function(evt) {
    infowindow.setContent(this.getPosition().toUrlValue(6));
    infowindow.open(map, marker);
  })
}

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(google.maps.geometry.spherical.computeOffset(center, radius, initialBearing + i * deltaBearing));
    bounds.extend(extp[extp.length - 1]);
  }
  return extp;
}

function drawCircle(point, radius) {
  var d2r = Math.PI / 180; // degrees to radians 
  var r2d = 180 / Math.PI; // radians to degrees 
  var EarthRadiusMeters = 6378137.0; // meters
  var earthsradius = 3963; // 3963 is the radius of the earth in miles

  var points = 32;

  // find the raidus in lat/lon 
  var rlat = (radius / EarthRadiusMeters) * r2d;
  var rlng = rlat / Math.cos(point.lat() * d2r);


  var extp = new Array();
  for (var i = 0; i < points + 1; i++) // one extra here makes sure we connect the 
  {
    var theta = Math.PI * (i / (points / 2));
    ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta) 
    ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta) 
    extp.push(new google.maps.LatLng(ex, ey));
    bounds.extend(extp[extp.length - 1]);
  }
  // alert(extp.length);
  return extp;
}

var map = null;
var bounds = null;

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>