Setting a KML layer transparency

Question

Is there a way to set the transparency of a kml layer when you add it? I am adding a kml layer that you cannot see through to the streets below. Is there a way to accomplish this

 var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var ctaLayer = new google.maps.KmlLayer({
    url: 'images/test3.kml'
  });

  var ctaLayer2 = new google.maps.KmlLayer({
    url: 'images/test.kml'
  });
  var ctaLayer3 = new google.maps.KmlLayer({
    url: 'images/kmztest2.kmz'
  });
  ctaLayer3.setMap(map);
  ctaLayer2.setMap(map);
  ctaLayer.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

As KML are added by Google Maps API as images in the DOM, you can change its opacity with CSS by searching the <img> elements that contain "kml" in its src attribute:

#map img[src*='kml'] {
    opacity: .5;
}

Also, you can achieve this using jQuery:

jQuery("#map").find("img[src*='kml']").css("opacity","0.5");

But keep in mind that when user zoom's out or moves the map, new KML images will be loaded, so you'll have to call that jQuery function again.