Google Maps Rollover Problem in a Flex Website

Question

Hi,

I'm using Google Maps in my Flex site to create a map. I've got polygons overlayed on the map. When the user rolls over a polygon an infowindow opens identifying the area and the fill Alpha of the area is set to 0. On roll-out, the info window is removed and the fill Alpha is returned to the default, 0.2.

The polygons display and the InfoWindow is added and removed correctly. The problem is that the change in fill alpha only occurs on the very last polygon in the list. So for example, if I have polygons A, B, C, and D. If I rollover A, then A's alpha should change. But, instead D's alpha changes. No matter which polygon I rollover, the last polygon's alpha changes. It's weird, because the infoWindows behave correctly on rollover. So, if I rollover polygon A, the correct information for InfoWindow A appears.

Please see the code below:

private function allEncodedPolygons(event:MouseEvent) : void {
                var myPaneManager:IPaneManager = map.getPaneManager();
                var myMapPane:IPane = myPaneManager.createPane();



                if (allHoodsToggle.selected) { 

                    map.clearOverlays();
                    mapType.selectedIndex = -1;

                    for each (var neighbNode:XML in detailMapResultData){
                      outlinePolygon = this.createPoly(neighbNode);
                    map.addOverlay(outlinePolygon)};

                    allHoodsToggle.removeEventListener(MouseEvent.CLICK, allEncodedPolygons);


                }
               else {myPaneManager.clearOverlays(); allHoodsToggle.removeEventListener(MouseEvent.CLICK, allEncodedPolygons); 

                    }       


    }

The function below creates the polygons and has the rollover function:

private var neighbShapes:Polygon;

    private function createPoly(neighbNode:XML):Polygon {
        var optionsDefault:PolygonOptions = new PolygonOptions( { strokeStyle: {thickness: 5, color: 0xFFFF00, alpha: 0.4, pixelHinting: true}, fillStyle: { alpha: 0.2 }} ); 


        var neighbCenterLat:Number = neighbNode.latitudeCenter.toString(); 
        var neighbCenterLong:Number = neighbNode.longitudeCenter.toString(); 
        var neighbCenter:LatLng = new LatLng(neighbCenterLat,neighbCenterLong);
        var optionsHover:PolygonOptions = new PolygonOptions( { fillStyle: { alpha: 0.0 }} ); 
        var encodedData:EncodedPolylineData = new EncodedPolylineData(neighbNode.encoding.toString(), neighbNode.zoomFactor.toString(), neighbNode.level.toString(), neighbNode.numlevels.toString());
        var encodedList:Array = [encodedData];
        neighbShapes = Polygon.fromEncoded(encodedList, optionsDefault);

        neighbShapes.addEventListener(MapMouseEvent.CLICK, function(event:MapMouseEvent): void {
           map.openInfoWindow(event.latLng, new InfoWindowOptions({content: neighbNode.name.toString(), hasCloseButton:false, hasShadow:true}));
        });

        neighbShapes.addEventListener(MapMouseEvent.ROLL_OVER, function(event:MapMouseEvent): void {
            neighbShapes.setOptions(optionsHover);

            map.openInfoWindow(neighbCenter, new InfoWindowOptions({content: neighbNode.name.toString(), hasCloseButton:false, hasShadow:false})); 
        });

        neighbShapes.addEventListener(MapMouseEvent.ROLL_OUT, function(event:MapMouseEvent): void {
            neighbShapes.setOptions(optionsDefault); 
        });

         return neighbShapes;
    }

Any suggestions as to why the function that changes the alpha is firing on the last polygon only, even though the InfoWindow appears correctly? If anyone has any ideas, I'd love to hear them.

Thanks.

-Laxmidi

Answer 1

Okay, I figured it out. Instead of targetting neighbShapes to set the hover options, I should have used: event.currentTarget.setOptions(optionsHover);

-Laxmidi