Google Maps Change JSON Overlay Style On Checkbox

Question

I want to be able to change the styling of the JSON overlay based on radio button being checked or not.

Radio Buttons Area 1 through Area 5 change the JSONs displayed

Radio Buttons Color JSON and Color Static change JSON styling

I've added a simple if then statement inside the inside the SetStyle function

  if (colorjson.checked) {  
      return {
        fillColor: feature.getProperty('COLOR'),
        strokeWeight: 1,
        strokeColor: 'black',
        fillOpacity: 0.4,
        strokeOpacity: 1,
        zIndex: 0
      };
    } else if (colorstatic.checked) {
      return {
      fillColor: '#006d2c',
      strokeWeight: 1,
      strokeColor: 'black',
      fillOpacity: 0.8
      };
    }

It kinda works. When I click on the Color Static radio button and hover over the overlay with the mouse the fillcolor does change.

However, I want the styling of the JSON to change on click.

Also, whatever style I chose (Color JSON or Color Static) I want that style to carry over to all 5 areas.

The full code is below:

function initAutocomplete() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {
      lat: 52.656963,
      lng: -112.506664
    },
    gestureHandling: 'greedy',
    mapTypeControl: false
  });

  var area1 = createArea('https://api.myjson.com/bins/myw18');
  var area2 = createArea('https://api.myjson.com/bins/nkbn0');
  var area3 = createArea('https://api.myjson.com/bins/cwnws');
  var area4 = createArea('https://api.myjson.com/bins/106pnw');
  var area5 = createArea('https://api.myjson.com/bins/7lwmk');
  var colorjson = document.getElementById('colorjson');
	var colorstatic = document.getElementById('colorstatic');

  function styleFunc(feature) {
 
      if (colorjson.checked) {	
          return {
            fillColor: feature.getProperty('COLOR'),
            strokeWeight: 1,
            strokeColor: 'black',
            fillOpacity: 0.4,
            strokeOpacity: 1,
            zIndex: 0
          };
        } else if (colorstatic.checked) {
          return {
          fillColor: '#006d2c',
          strokeWeight: 1,
          strokeColor: 'black',
          fillOpacity: 0.8
          };
        }
  }

  // Infowindow
  var infoWindow = new google.maps.InfoWindow({
    zIndex: 2
  });
  map.addListener('click', function() {
    area1.revertStyle();
    area2.revertStyle();
    area3.revertStyle();
    area4.revertStyle();
    area5.revertStyle();
    infoWindow.close();
  })

  function clickFunc(event) {
    this.revertStyle();
    this.overrideStyle(event.feature, {
      strokeWeight: 2,
      strokeColor: 'black',
      zIndex: 1
    });

    var CDNAME = event.feature.getProperty('CDNAME');
    var COLOR = event.feature.getProperty('COLOR');

    infoWindow.setPosition(event.latLng);
    infoWindow.setOptions({
      pixelOffset: {
        width: 0,
        height: -3
      }
    });

    infoWindow.setContent(
      "CDNAME: <b>" + CDNAME + "</b><br />" +
      "COLOR: <b>" + COLOR + "</b>"
    );
    infoWindow.open(map);
  }


  function mouseFunc(event) {
    this.revertStyle();
    this.overrideStyle(event.feature, {
      strokeWeight: 2,
      strokeColor: 'black',
      zIndex: 1
    });
  }

  function createArea(url) {
    var area = new google.maps.Data();
    area.loadGeoJson(url);
    area.setStyle(styleFunc);
    area.addListener('click', clickFunc);
    area.addListener('mouseover', mouseFunc);
    return area;
  }

  setArea();

  function setArea() {
    infoWindow.close();
    area1.setMap(document.getElementById('area1').checked ? map : null);
    area2.setMap(document.getElementById('area2').checked ? map : null);
    area3.setMap(document.getElementById('area3').checked ? map : null);
    area4.setMap(document.getElementById('area4').checked ? map : null);
    area5.setMap(document.getElementById('area5').checked ? map : null);
  }

  google.maps.event.addDomListener(document.getElementById('area1'), 'click', setArea);
  google.maps.event.addDomListener(document.getElementById('area2'), 'click', setArea);
  google.maps.event.addDomListener(document.getElementById('area3'), 'click', setArea);
  google.maps.event.addDomListener(document.getElementById('area4'), 'click', setArea);
  google.maps.event.addDomListener(document.getElementById('area5'), 'click', setArea);

}

#map {
  height: 90%;
}

/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<p>
Area
</p>
<form class="form">
  <div class="switch-field">
    <input type="radio" id="area1" name="switch-two" checked/>
    <label for="area1">Area 1</label>

    <input type="radio" id="area2" name="switch-two" />
    <label for="area2">Area 2</label>

    <input type="radio" id="area3" name="switch-two" />
    <label for="area3">Area 3</label>

    <input type="radio" id="area4" name="switch-two" />
    <label for="area4">Area 4</label>

    <input type="radio" id="area5" name="switch-two" />
    <label for="area5">Area 5</label>
  </div>
</form>
<p>
Change Color
</p>
    <input type="radio" id="colorjson" name="switch-two" checked/>
    <label for="colorjson">Color JSON</label>

    <input type="radio" id="colorstatic" name="switch-two" />
    <label for="colorstatic">Color Static</label>

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initAutocomplete" async defer></script>

Answer 1

One option would be to add these to lines to your code to trigger the style function on the currently active data layer:

google.maps.event.addDomListener(document.getElementById('colorjson'), 'click', setArea);
google.maps.event.addDomListener(document.getElementById('colorstatic'), 'click', setArea);

proof of concept fiddle

code snippet:

function initAutocomplete() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {
      lat: 52.656963,
      lng: -112.506664
    },
    gestureHandling: 'greedy',
    mapTypeControl: false
  });

  var area1 = createArea('https://api.myjson.com/bins/myw18');
  var area2 = createArea('https://api.myjson.com/bins/nkbn0');
  var area3 = createArea('https://api.myjson.com/bins/cwnws');
  var area4 = createArea('https://api.myjson.com/bins/106pnw');
  var area5 = createArea('https://api.myjson.com/bins/7lwmk');
  var colorjson = document.getElementById('colorjson');
	var colorstatic = document.getElementById('colorstatic');

  function styleFunc(feature) {
 
      if (colorjson.checked) {	
          return {
            fillColor: feature.getProperty('COLOR'),
            strokeWeight: 1,
            strokeColor: 'black',
            fillOpacity: 0.4,
            strokeOpacity: 1,
            zIndex: 0
          };
        } else if (colorstatic.checked) {
          return {
          fillColor: '#006d2c',
          strokeWeight: 1,
          strokeColor: 'black',
          fillOpacity: 0.8
          };
        }
  }

  // Infowindow
  var infoWindow = new google.maps.InfoWindow({
    zIndex: 2
  });
  map.addListener('click', function() {
    area1.revertStyle();
    area2.revertStyle();
    area3.revertStyle();
    area4.revertStyle();
    area5.revertStyle();
    infoWindow.close();
  })

  function clickFunc(event) {
    this.revertStyle();
    this.overrideStyle(event.feature, {
      strokeWeight: 2,
      strokeColor: 'black',
      zIndex: 1
    });

    var CDNAME = event.feature.getProperty('CDNAME');
    var COLOR = event.feature.getProperty('COLOR');

    infoWindow.setPosition(event.latLng);
    infoWindow.setOptions({
      pixelOffset: {
        width: 0,
        height: -3
      }
    });

    infoWindow.setContent(
      "CDNAME: <b>" + CDNAME + "</b><br />" +
      "COLOR: <b>" + COLOR + "</b>"
    );
    infoWindow.open(map);
  }


  function mouseFunc(event) {
    this.revertStyle();
    this.overrideStyle(event.feature, {
      strokeWeight: 2,
      strokeColor: 'black',
      zIndex: 1
    });
  }

  function createArea(url) {
    var area = new google.maps.Data();
    area.loadGeoJson(url);
    area.setStyle(styleFunc);
    area.addListener('click', clickFunc);
    area.addListener('mouseover', mouseFunc);
    return area;
  }

  setArea();

  function setArea() {
    infoWindow.close();
    area1.setMap(document.getElementById('area1').checked ? map : null);
    area2.setMap(document.getElementById('area2').checked ? map : null);
    area3.setMap(document.getElementById('area3').checked ? map : null);
    area4.setMap(document.getElementById('area4').checked ? map : null);
    area5.setMap(document.getElementById('area5').checked ? map : null);
  }

  google.maps.event.addDomListener(document.getElementById('area1'), 'click', setArea);
  google.maps.event.addDomListener(document.getElementById('area2'), 'click', setArea);
  google.maps.event.addDomListener(document.getElementById('area3'), 'click', setArea);
  google.maps.event.addDomListener(document.getElementById('area4'), 'click', setArea);
  google.maps.event.addDomListener(document.getElementById('area5'), 'click', setArea);
  google.maps.event.addDomListener(document.getElementById('colorjson'), 'click', setArea);
  google.maps.event.addDomListener(document.getElementById('colorstatic'), 'click', setArea);

}

#map {
  height: 90%;
}

/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<p>
Area
</p>
<form class="form">
  <div class="switch-field">
    <input type="radio" id="area1" name="switch-two" checked/>
    <label for="area1">Area 1</label>

    <input type="radio" id="area2" name="switch-two" />
    <label for="area2">Area 2</label>

    <input type="radio" id="area3" name="switch-two" />
    <label for="area3">Area 3</label>

    <input type="radio" id="area4" name="switch-two" />
    <label for="area4">Area 4</label>

    <input type="radio" id="area5" name="switch-two" />
    <label for="area5">Area 5</label>
  </div>
</form>
<p>
Change Color
</p>
    <input type="radio" id="colorjson" name="switch-two" checked/>
    <label for="colorjson">Color JSON</label>

    <input type="radio" id="colorstatic" name="switch-two" />
    <label for="colorstatic">Color Static</label>

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initAutocomplete" async defer></script>