setOpacity does not work on google layers

classic Classic list List threaded Threaded
2 messages Options
Reply | Threaded
Open this post in threaded view

setOpacity does not work on google layers

This post was updated on .
I am working on a GIS API that uses OpenLayers 2.13.

I also use the google layers: OpenLayers.Layer.Google.

The opacity options does not work with google layers.

I define my map and layers like this:

    map = new OpenLayers.Map('map', {
        allOverlays: false,
        autoUpdateSize: true,
        displayProjection: new OpenLayers.Projection('EPSG:4326'),
        numZoomLevels: 16,
        projection: new OpenLayers.Projection('EPSG:900913'),
        zoomMethod: null,
        units: 'km'

    map.addControl(new OpenLayers.Control.LayerSwitcher());

    var osm = new OpenLayers.Layer.OSM();

    var google = new OpenLayers.Layer.Google('google', {
        map: map


    var center = new OpenLayers.LonLat(-0.125, 51.5);
    center.transform(new OpenLayers.Projection('EPSG:4326'), new OpenLayers.Projection('EPSG:900913'));
    var zoomLevel = 4;
    map.setCenter(center, zoomLevel);

The setOpacity method works fine with the OSM layer:


But when I do:


it does not work.

I have created a CodePen to easily show the problem I am facing.

Apparently, it is a common issue, because I have read about it, but I have not found any solutions yet.

How can I make the setOpacity method work for google layers?

Thanks a lot.

João Rodrigues
Reply | Threaded
Open this post in threaded view

Re: setOpacity does not work on google layers

After further investigation, I was able to better understand how the Google layer works.

The Google layer is inside a Google maps container. The OpenLayers map is also put inside the DIV of the Google map. The DIV of the google map has the following CSS:

    /* GMaps should not set styles on its container */
    .olForeignContainer {
        opacity: 1 !important;

The opacity of the google layer can't be changed, because of the "!important" property. I tried to modify the default OpenLayers style, by removing the "!important" property, but setting the opacity in the Google layer, sets the opacity of the whole DIV containing the Google map, and subsequently sets the opacity of the entire OpenLayers Map (considering that it is contained in the DIV of the Google map).

For now, I can't find a fix for this issue.

Could someone please help me with this issue? I want to know if it is even possible to set the opacity of a Google layer in the current version (2.13). Thanks