title: Changing google-maps polygon color/fill on click
body: <p>I have the following code which has been passed on to me and creates polygons:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  var map;
  function initialize() {
      var myLatlng = new google.maps.LatLng(-36.42,145.710);
      var myOptions = { zoom: 15, center: myLatlng, mapTypeId: google.maps.MapTypeId.SATELLITE }
  
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
      // Create polygon overlays from site data in file data.js included above
      // Overlays are defined by a set of coordinates
      // We will also be setting up an infowindow with the site name
      // The infowindow will be designed to point to the 'center' of each site so we calculate the 'centroid' of each overlay in the code below as well
      var overlay;
      var number_of_overlays = 29;
  
      for (var k = 0; k &lt; number_of_overlays; k++) {
          var pk = primaryKeys[k];
          var verticesArray = new Array((eval("siteVertices_" + pk).length) / 2);
          var m = 0;
          var centroidLat = 0;
          var centroidLng = 0;
  
          for (var n = 0; n &lt; eval("siteVertices_" + pk).length; n += 2)
          {
              verticesArray[m] = new google.maps.LatLng(eval("siteVertices_" + pk)[n], eval("siteVertices_" + pk)[n + 1]);
              m = m + 1;
              centroidLat += eval("siteVertices_" + pk)[n];
              centroidLng += eval("siteVertices_" + pk)[n + 1];
          }
  
          var cent = new google.maps.LatLng(centroidLat/m, centroidLng/m);
  
          var overlay = new google.maps.Polygon({
              paths: verticesArray,
              strokeColor: "#FF0000",
              strokeOpacity: 0.5,
              strokeWeight: 1,
              fillColor: "#FF0000",
              fillOpacity: 0.20,
              position: cent,
              map:map });
  
          attachInfoWindow(overlay, k);
      }
  }
  
  function attachInfoWindow(overlay, number) {
    var infowindow = new google.maps.InfoWindow({ content: siteNames[number] });
    google.maps.event.addListener(overlay, 'mouseover', function() { infowindow.open(map, overlay); });
    google.maps.event.addListener(overlay, 'mouseout', function() { infowindow.close(map, overlay); });
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>The code uses data.js, which looks a lot like this:</p>
  
  <pre><code>var primaryKeys = [1, 2, 3];
  
  var siteNames = ['area_1', 'area_2', 'area_3'];
  
  var siteVertices_1 = [-36.42716187286321, 145.7040742777405, -36.426678448311414, 145.70408500657655, -36.42786542285944, 145.70926703439332, -36.428335891385544, 145.70912755952455];
  var siteVertices_2 = [-36.42664391787113, 145.70415474401094, -36.42616912275949, 145.70439077840425, -36.42733884002687, 145.70942796693421, -36.427804995502726, 145.70927239881135];
  var siteVertices_3 = [-36.42611732675347, 145.7044176004944, -36.42570295746138, 145.70467509255982, -36.42684246769319, 145.70961035714723, -36.42730862614943, 145.7094601534424];
  </code></pre>
  
  <p>Currently, the polygons are created using a red outline and fill.  I would like to add a behavior so that when the user clicks on a polygon, the polygon becomes "active" and the outline and fill become yellow.</p>
  
  <p>I'm not great at javascript, and am not sure how to go about this. I know I need to add a listener for 'click', but beyond that I'm stuck. Assistance would be much appreciated! MTIA.</p>