Circles fill colour - google-maps-api-3

Question

I wonder it is any chance to fill different color between circles, so in the code below I have used code for cities but work for my purpose as well. Anyway I have 4 circles from the same center point, 4,6,8,11 miles and they are marked by strokecolor. However I wonder can I have different fill between 4-6, 6-8, 8-11 miles??
var distancemap = {
fourmiles: {
center: {lat: 53.3555367, lng: -6.2748774},
distance: 6437.38
},
sixmiles: {
center: {lat: 53.3555367, lng: -6.2748774},
distance: 9656.064
},
eightmiles: {
center: {lat: 53.3555367, lng: -6.2748774},
distance: 12874.8
},
elevenmiles: {
center: {lat: 53.3555367, lng: -6.2748774},
distance: 17702.8
}
};
function initAutocomplete() {
// Create the map.
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: 53.3555367, lng: -6.2748774},
mapTypeId: 'roadmap'
});
// Construct the circle for each value in distancemap.
// Note: We scale the area of the circle based on the distance.
for (var city in distancemap) {
// Add the circle for this city to the map.
var cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#000000',
fillOpacity: 0.005,
map: map,
center: distancemap[city].center,
radius: Math.abs(distancemap[city].distance) * 1
});

Answer 1

You can't make "holes" in a google.maps.Circle. But you can make circular google.maps.Polygons with holes in them. See this related question:
Draw ring (not circle) in Google Maps API
// Add the circle for this city to the map.
var paths;
if (i==0) {
// innermost circle, no "hole"
paths = [drawCircle(distanceArray[0].center, Math.abs(distanceArray[0].distance) * 1, 1)];
} else {
// every other circle has a "hole" the size of the inner/next smallest circle
paths = [
drawCircle(distanceArray[i-1].center, Math.abs(distanceArray[i-1].distance) * 1, -1),
drawCircle(distanceArray[i].center, Math.abs(distanceArray[i].distance) * 1, 1)
];
}
var cityCircle = new google.maps.Polygon({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: distanceArray[i].color,
fillOpacity: 0.5,
map: map,
paths: paths
});
proof of concept fiddle
code snippet:
function initAutocomplete() {
// Create the map.
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {
lat: 53.3555367,
lng: -6.2748774
},
mapTypeId: 'roadmap'
});
for (var i = 0; i < distanceArray.length; i++) {
// Add the circle for this city to the map.
var paths;
if (i == 0) {
paths = [drawCircle(distanceArray[0].center, Math.abs(distanceArray[0].distance) * 1, 1)];
} else {
paths = [drawCircle(distanceArray[i - 1].center, Math.abs(distanceArray[i - 1].distance) * 1, -1),
drawCircle(distanceArray[i].center, Math.abs(distanceArray[i].distance) * 1, 1)
];
}
var cityCircle = new google.maps.Polygon({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: distanceArray[i].color,
fillOpacity: 0.5,
map: map,
paths: paths
});
}
}
google.maps.event.addDomListener(window, "load", initAutocomplete);
function drawCircle(point, radius, dir) {
if (typeof point.lat !== "function") {
point = new google.maps.LatLng(point.lat, point.lng);
}
var d2r = Math.PI / 180; // degrees to radians
var r2d = 180 / Math.PI; // radians to degrees
var earthsradius = 6378137.0; // 6378137.0 is the radius of the earth in meters
var points = 32;
// find the raidus in lat/lon
var rlat = (radius / earthsradius) * r2d;
var rlng = rlat / Math.cos(point.lat() * d2r);
var extp = new Array();
if (dir == 1) {
var start = 0;
var end = points + 1;
} // one extra here makes sure we connect the ends
else {
var start = points + 1;
var end = 0;
}
for (var i = start;
(dir == 1 ? i < end : i > end); i = i + dir) {
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]);
}
return extp;
}
var distancemap = {
fourmiles: {
center: {
lat: 53.3555367,
lng: -6.2748774
},
distance: 6437.38,
color: "#FF0000"
},
sixmiles: {
center: {
lat: 53.3555367,
lng: -6.2748774
},
distance: 9656.064,
color: "#00FF00"
},
eightmiles: {
center: {
lat: 53.3555367,
lng: -6.2748774
},
distance: 12874.8,
color: "#0000FF"
},
elevenmiles: {
center: {
lat: 53.3555367,
lng: -6.2748774
},
distance: 17702.8,
color: "#FFFF00"
}
};
var distanceArray = [
distancemap.fourmiles,
distancemap.sixmiles,
distancemap.eightmiles,
distancemap.elevenmiles
]
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map"></div>