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%.
Share Improve this question edited Apr 9, 2013 at 21:57 Rolando asked Apr 9, 2013 at 21:50 RolandoRolando 62.7k104 gold badges279 silver badges422 bronze badges3 Answers
Reset to default 5In 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