Changing google-maps polygon color/fill on click

Question

I have the following code which has been passed on to me and creates polygons:

<script type="text/javascript">  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 < 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 < 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); }); } </script> 

The code uses data.js, which looks a lot like this:

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]; 

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.

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.

Answer 1

Kaspar Vesth is almost there. Yes, you have to call setOptions. But keep in mind that you don't have to pass in all the options every time, it's enough to pass in only the ones you want to change. E.g.:

myPolygon.setOptions({strokeWeight: 2.0, fillColor: 'green'}); // polygon is clicked myPolygon.setOptions({strokeWeight: 6.0}); 

Answer 2

I think you have to pass to the polygon object a new PolygonOptions by calling this method:

setOptions(options:PolygonOptions). 

You can see the different options here: http://code.google.com/apis/maps/documentation/javascript/reference.html#PolygonOptions

In this PolygonOptions you can then specify the color you want the Polygon to be filled with along with all the other stuff you could want to change.