Question

I have created some polygons and a html list with their names. I want to change a polygon’s opacity when the mouse hovers over its name in the list.

...
<li><a href="#" data-poly="polyID" class="hoverPoly">City</a></a>
...
$('.hoverPoly').live('onmouseover',function(){
    var polyName = $(this).attr('data-poly');
    // var gmap is reference to google map
    // I want find polygon with polyName
})

polygon set as

function initialize(){
...
   var poly_444555 = new google.maps.Polygon({
       ...
       name:'polyID', // this is id for external access
   })
}

Answer 1

very complicated example

Key point:

• array of polygons to allow access from the global context.

Uses something like this in the sidebar HTML (one for each polygon in the array). When the user mouses over the element, it modifies the properties of the polygon, putting the properties back on mouse out:

sidebarHtml += '<tr id="row'+i+'"><td onmouseover="kmlHighlightPoly('+i+');" onmouseout="kmlUnHighlightPoly('+i+');"><a href="javascript:kmlPlClick('+i+');">'+name+'</a> - <a href="javascript:kmlShowPlacemark('+i+');">show</a></td></tr>';

The kmlHighlightPoly method currently changes the color of the polygon, but it could just as easily change the opacity.

function highlightPoly(poly, polynum) {
  google.maps.event.addListener(poly,"mouseover",function() {
    var rowElem = document.getElementById('row'+polynum);
    if (rowElem) rowElem.style.backgroundColor = "#FFFA5E";
    poly.setOptions(highlightOptions);
  });
  google.maps.event.addListener(poly,"mouseout",function() {
    var rowElem = document.getElementById('row'+polynum);
    if (rowElem) rowElem.style.backgroundColor = "#FFFFFF";
    poly.setOptions(poly.normalStyle);
  });
}