How To Draw 2 Concentric Arcs In Googlemap

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 codes

Solution 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:

functioninitialize() {
  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).
*/varEarthRadiusMeters = 6378137.0; // metersvar infowindow = new google.maps.InfoWindow({
  size: new google.maps.Size(150, 50)
});


functioncreateMarker(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);
  })
}

functiondrawArc(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 = newArray();

  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;
}

functiondrawCircle(point, radius) {
  var d2r = Math.PI / 180; // degrees to radians var r2d = 180 / Math.PI; // radians to degrees varEarthRadiusMeters = 6378137.0; // metersvar earthsradius = 3963; // 3963 is the radius of the earth in milesvar points = 32;

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


  var extp = newArray();
  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
}

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