Cambio google-maps polígono de color/llenado de clic

Question

tengo el siguiente código que se ha pasado a mí y crea polígonos:

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

El código utiliza data.js, que se parece mucho a esto:

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

Actualmente, los polígonos se crean con un contorno y un relleno de color rojo. Me gustaría agregar un comportamiento para que cuando el usuario haga clic en un polígono, el polígono se vuelva "activo" y el contorno y el relleno se vuelvan amarillos.

No soy genial en javascript, y no estoy seguro de cómo hacerlo. Sé que necesito agregar un oyente para 'clic', pero más allá estoy atrapado. ¡La asistencia sería muy apreciada! MTIA.

Answer 1

yo creo que hay que pasar al polígono objeto un nuevo PolygonOptions llamando a este método:

setOptions(options:PolygonOptions). 

Puede ver las distintas opciones aquí: http://code.google.com/apis/maps/documentation/javascript/reference.html#PolygonOptions

En este PolygonOptions a continuación, puede especificar el color con el que desea que se llene el Polygon junto con todas las otras cosas que podría querer cambiar.

Answer 2

Kaspar Vesth está por llegar. Sí, tienes que llamar a setOptions. Pero tenga en cuenta que no tiene que pasar todas las opciones todas las veces, es suficiente pasar solo las que desea cambiar. P. ej .:

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