Google maps draw polygon and change color on click

<script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 9,
      center: {
        lat: 25.774,
        lng: -80.190
      }
    });

    map.data.addGeoJson({
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "properties": {
            "letter": "G",
            "color": "blue",
            "rank": "7",
            "ascii": "71"
          },
          "geometry": {
            "type": "Polygon",
            "coordinates": [[
              [-80.190, 25.774],
              [-66.118, 18.466],
              [-64.757, 32.321],
              [-80.190, 25.774],
            ]]
          }
        }
      ]
    });

    map.data.setStyle(function(feature) {
      return ({
        fillColor: feature.getProperty('color'),
        strokeColor: feature.getProperty('color'),
        strokeWeight: 1
      });
    });

    map.data.addListener('click', function(event) {
      event.feature.setProperty('color', 'red');
    });
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_API_KEY&callback=initMap">
</script>