title: Select a Google Maps Polygon outside map control and modify properties
body: <p>I'm trying to modify a polygon when an event is triggered outside the map control and seem to be hitting a brick wall.</p>
  
  <p>i have a series of divs to the right of my map and would like to change the strokeweight property on the polygon to a heavier line when the mouseenter event is fired and reset it to the default when the mouse leave is triggered.</p>
  
  <p>i would also like to be able to select the polygon when they click on this div</p>
  
  <pre><code>$( ".zonal" ).mouseenter(function() {
    for (var i = 0; i &lt; gPolygons.length; i++) {
     if(gPolygons[i].id == $(this).attr('id')) 
       {
         gPolygons[i].setOptions({strokeWeight: 6.0});       
       }
    }
  });
  
  $( ".zonal" ).mouseleave(function() {
    for (var i = 0; i &lt; gPolygons.length; i++) {
     if(gPolygons[i].id == $(this).attr('id')) 
       {
         gPolygons[i].setOptions({strokeWeight: 2.0}); 
       }
    }
  });
  </code></pre>
  
  <p>i have pushed the polygons out to an array and tried using the following but it doesn't work</p>
  
  <pre><code>gPolygons[i].setOptions({strokeWeight: 6.0}); 
  </code></pre>
  
  <p>Here is a visual of what im trying to do, so when they hover over zone 1 the border line of the polygon will get thicker and if the click on the div the relevant polygon will be selected.</p>
  
  <p>Any help appreciated guys</p>
  
  <p><a href="https://i.stack.imgur.com/n3eGf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n3eGf.png" alt="enter image description here"></a></p>