# How to reduce the opacity of a Google Maps layer in CartoDB.js

I have a CartoDB.js-App where I load my vis using cartodb.createVis (I do not manually define Leaflet layers).

How can I reduce the opacity of the Google Maps base layer? I tried the following, as Google Maps has the layer index 0.

var initializeMap = function() {
// map initialization
cartodb.createVis('map', VIZAPI, {
shareable: false,
title: false,
description: false,
search: true,
center_lat: 47,
center_lon: 8,
zoom: 9,
cartodb_logo: false
})
.done(function(vis, layers) {
// layer 0 is the base layer, layer 1 is cartodb layer
// setInteraction is disabled by default
window.layers = layers;
layers[1].setInteraction(true);
// layers[1] is "all"
layers[1].on('featureOver', function(e, pos, latlng, data) {
updateClubInfo(data.cartodb_id);
});
layers[1].on('featureClick', function(e, pos, latlng, data) {
updateClubInfo(data.cartodb_id);
});
layers[0].setOpacity(0.3);
// layers[1].getSubLayer(0).setCartoCSS()
window.overlays = vis.getOverlays();
})

.error(function(err) {
console.log(err);
});
};


This doesn't work as setOpacity is not defined on the Google Maps layer.

I also came up with the idea of creating a white, "empty" sublayer between my data layer and the Google Maps layer and set its opacity. But I don't know how to do that with the CartoDB API.

Google allows you style the map tiles themselves. You won't need the CartoDB API for this. It's not a true "opacity" of the map layer, but you can use the map style to change the lightness of the map tiles to achieve what I believe is the effect you want.

Check out https://developers.google.com/maps/documentation/javascript/styling for examples. However here's one to get you started:

function initialize() {
// Create an array of styles.
var styles = [{
stylers: [
{ lightness: 50 }
]
}];

// Create a new StyledMapType object, passing it the array of styles,
// as well as the name to be displayed on the map type control.
var styledMap = new google.maps.StyledMapType(styles, {name: "Styled Map"});

// Create a map object, and include the MapTypeId to add
// to the map type control.
var mapOptions = {
zoom: 11,

• Great. I came to this solution myself, but within the CartoDB API: vis.getNativeMap().setOptions(options_with_styles) and without initializing a new google maps object. Thx. – wnstnsmth Jul 15 '14 at 6:28