How do I change the overlayMapType opacity after I added to the map?

        var imgTypeOptions = {
            getTileUrl: function (coord, zoom) {                               
                return "myTile/" + f + ".png";        
            },
            tileSize: new google.maps.Size(256, 256),
            name: "Imagen",
            opacity: .5 //This is Ok, the first time set the opacity
            //but i want to change the opacity later
        };

...
        var imgMapType = new google.maps.ImageMapType(imgTypeOptions);
...
    map.overlayMapTypes.insertAt(0, imgMapType);

I want to be able to click a link "25%" and set the opacity of the added layer to 25%.

How do I change the overlayMapType opacity after I added to the map?

        var imgTypeOptions = {
            getTileUrl: function (coord, zoom) {                               
                return "myTile/" + f + ".png";        
            },
            tileSize: new google.maps.Size(256, 256),
            name: "Imagen",
            opacity: .5 //This is Ok, the first time set the opacity
            //but i want to change the opacity later
        };

...
        var imgMapType = new google.maps.ImageMapType(imgTypeOptions);
...
    map.overlayMapTypes.insertAt(0, imgMapType);

I want to be able to click a link "25%" and set the opacity of the added layer to 25%.

• javascript
• google-maps
• google-maps-api-3

3 Answers 3

In 3.28 you have to use the getter. Please try the following code:

map.overlayMapTypes.getAt(0).setOpacity(0.25)

Have a look at the ImageMapType api documentation:

https://developers.google./maps/documentation/javascript/reference#ImageMapType

Something like this should work.

map.overlayMapTypes[0].setOpacity(.25) 

In 2018, this is how you do with my working example.

I use open street map tile, sample

 z= zoom  
 x= coord.x  
 y= coord.y

https://tile.openstreetmap/10/261/380.png

https://tile.openstreetmap/${z}/${x}/${y}.png 

For tile, you should use ImageMapTypes,

then use

   map.overlayMapTypes.push(imageMapType);

or

   map.overlayMapTypes.insertAt(
        0, new CoordMapType(new google.maps.Size(256, 256)));

to add new tile layer over the google base layer.

You can set opacity by :

 // for old api

 //map.overlayMapTypes[0].setOpacity(0.25);





   //for 3.28 api  (in 2018)

   map.overlayMapTypes.getAt(0).setOpacity(0.5);

here is my working example jsfiddle, for overlay tile use ImageMapTypes

another way of doing this:

sample: use coordMapType instead of ImageMapTypes