Is it possible to dynamically change opacity of GeoServer overlay in Google Maps API v3

Question

I can successfully change the opacity of custom tiles with a slider in Google Maps.... http://www.geology.ar.gov/geology/geology_map_full.htm

I cannot, however, change the opacity of a GeoServer overlay with a slider in Google Maps... http://www.geology.ar.gov/geology/strat_geomap_test.htm

They both use similar coding but when you adjust the opacity slider in the second map I'm warned that setOpacity is not a function. Is it possible to dynamically change the opacity of a GeoServer overlay with a slider in Google Maps?

For the custom tile map here is the code I use

function CustomMapType(args){

                var opts = {

                      getTileUrl: function(coord, zoom) {

                        if ((zoom < mapMinZoom) || (zoom > mapMaxZoom)) {
                          return args.BaseUrl + "datatiles/none.png";
                        } 
                        var ymax = 1 << zoom;
                        var zFactor = Math.pow(2,zoom);
                        var y = ymax - coord.y -1;

                        var tileBounds = new google.maps.LatLngBounds(                              
                            map.getProjection().fromPointToLatLng( new google.maps.Point( (coord.x)*args.tileSize/zFactor, (coord.y+1)*args.tileSize/zFactor ) ),
                            map.getProjection().fromPointToLatLng( new google.maps.Point( (coord.x+1)*args.tileSize/zFactor, (coord.y)*args.tileSize/zFactor ) )
                         );

                        if (mapBounds.intersects(tileBounds)){

                            return args.BaseUrl + "datatiles/COGEO/" + zoom + "/x" + coord.x + "_y" + coord.y + ".png" ;
                        } else {

                            return args.BaseUrl + "datatiles/none.png";
                        }
                    },
                    tileSize: new google.maps.Size(args.tileSize, args.tileSize),
                    isPng: true,
                    maxZoom:  args.maxZoom,
                    minZoom:  args.minZoom
                };
                var map_type = new google.maps.ImageMapType(opts);
                map_type.name = args.name;
                map_type.alt = args.alt;

                return map_type;

            } //end CustomMapType()

function setTiles(_opacity){

                for(var i in customtiles){
                    map.overlayMapTypes.setAt(i, customtiles[i]);
                    customtiles[i].setOpacity(_opacity);
                }                   
            } 




            function changeMapTileOpacity(_opacity){

                for(var i in customtiles){
                    customtiles[i].setOpacity(_opacity);
                }
            }



            /** 
            * tile Opacity slider control
            */
            function FilterControl(controlDiv, map) {

                controlDiv.style.padding = '4px';
                var controlUI = document.createElement('DIV');
                controlUI.id = "opsContainer";
                controlUI.style.cssText="position:absolute;right:7px;width: 70px; height: 21px; z-index: 0; top: 10px;";                    

                var controlKnob = document.createElement('DIV');
                controlKnob.id = "knob";
                controlKnob.style.cssText="height: 21px; width: 13px; background-image: url(http://www.geology.ar.gov/images/opacity-slider.png); left: 22px; top: 0px; position: absolute; cursor: pointer; background-position: -70px 0px;";

                var controlOpSlider = document.createElement('DIV');
                controlOpSlider.id = "opSlider";
                controlOpSlider.style.cssText="height:21px; width:70px; background-image: url(http://www.geology.ar.gov/images/opacity-slider.png)";    

                controlOpSlider.appendChild(controlKnob);
                controlUI.appendChild(controlOpSlider);
                controlDiv.appendChild(controlUI);

                var opSlider = new ExtDraggableObject(controlKnob, { restrictY:true, container:controlOpSlider});
                opSlider.setValueX(opacity*57);

                var dragEndEvent = google.maps.event.addListener(opSlider, "dragend", function(e) {
                    var opVal = opSlider.valueX();
                    changeMapTileOpacity(opVal/57);
                });

            } //end FilterControl()

This is used within mapLoad() function....

/** 
                * create custom map type tile
                */ 
                customtiles[0] =  CustomMapType({
                    name        : 'AGS Geology',
                    alt         : 'Geologic Map Custom Tile',
                    tileSize    : 256,
                    BaseUrl     : "http://www.geology.ar.gov/geology/",
                    minZoom     : mapMinZoom,
                    maxZoom     : mapMaxZoom
                });


                setTiles(opacity);


                //add opacity slider to map
                var filterDiv = document.createElement('DIV');
                var mControl = new FilterControl(filterDiv, map);
                filterDiv.index = 1;
                filterDiv.style.cssText="position:absolute;right:7px;";
                map.controls[google.maps.ControlPosition.RIGHT_TOP].push(filterDiv);

For the GeoServer map....

function geoServerOverlay(args) {

var opts = {

    getTileUrl: function(coord, zoom)
    {
        var lULP = new google.maps.Point(coord.x*256,(coord.y+1)*256);
        var lLRP = new google.maps.Point((coord.x+1)*256,coord.y*256);

        var projectionMap = new MercatorProjection();

        var lULg = projectionMap.fromDivPixelToSphericalMercator(lULP, zoom);
        var lLRg  = projectionMap.fromDivPixelToSphericalMercator(lLRP, zoom);

        var lUL_Latitude = lULg.y;
        var lUL_Longitude = lULg.x;
        var lLR_Latitude = lLRg.y;
        var lLR_Longitude = lLRg.x;

        if (lLR_Longitude < lUL_Longitude){
          lLR_Longitude = Math.abs(lLR_Longitude);
        }
        return GEOSERVERBASE + "/geoserver/wms?" + wmsparams.join("&") + "&layers=" + args.geoLayer + "&bbox=" + lUL_Longitude + "," + lUL_Latitude + "," + lLR_Longitude + "," + lLR_Latitude + "&styles=" + args.geoStyle;
    },
    tileSize: new google.maps.Size(256, 256),
    isPng: true,
    maxZoom: mapMaxZoom,
    minZoom: mapMinZoom,
    alt: args.geoName    
};

return opts;

}

overlayMaps[0] = geoServerOverlay({
            geoLayer: Geo500K,
            geoStyle: 'qcm_Geo500K',                
            geoName: 'Geology 500K'
        }); 

var overlayMap = new google.maps.ImageMapType(overlayMaps[0]);

    map.overlayMapTypes.setAt(1,overlayMap); //set behind placeholder at 1 spot 

Trying this to change opacity...

function changeMapTileOpacity(_opacity){

                for(var i in overlayMaps){
                    overlayMaps[i].setOpacity(_opacity);
                }
            }  

Answer 1

According to the documentation, the ImageMapType object has a setOpacity method. Your code is calling it on your geoServerOverlay class (which is not an ImageMapType object).

overlayMaps[0] = geoServerOverlay({
            geoLayer: Geo500K,
            geoStyle: 'qcm_Geo500K',                
            geoName: 'Geology 500K'
        });     

...

overlayMaps[i].setOpacity(_opacity);

looks to me like you keep a reference to at least one of the ImageMapType objects:

    var overlayMap = new google.maps.ImageMapType(overlayMaps[0]);

so overlayMap.setOpacity should work, but you need to move that to the global scope to use it.