Changing Circle fillColor in google maps api - google-maps

Question

so I have created a button which is creating a Circle on a Google map.
this.Circle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: this.map,
center: this.map.getCenter(),
radius: 100,
editable: true,
draggable: true
});
I would like to set typz() so it would be changing color of the circle to black.
typz(){
}
How to do this?

Answer 1

Per the documentation, you set the color using the fillColor option:
function changeColor(circle) {
if (circle.get("fillColor") == "black") {
circle.setOptions({fillColor:"red", strokeColor: "red"});
} else {
circle.setOptions({fillColor: "black", strokeColor: "black"});
}
}
proof of concept fiddle
code snippet:
function changeColor(circle) {
if (circle.get("fillColor") == "black") {
circle.setOptions({
fillColor: "red",
strokeColor: "red"
});
} else {
circle.setOptions({
fillColor: "black",
strokeColor: "black"
});
}
}
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var circle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: map.getCenter(),
radius: 100,
editable: true,
draggable: true
});
google.maps.event.addDomListener(document.getElementById('tog'), 'click', function(evt) {
changeColor(circle);
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background-color: white;
}
#map_canvas {
height: 80%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input type="button" id="tog" value="toggle color" />
<div id="map_canvas"></div>