Setting a KML layer transparency


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'

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

Best Solution

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:


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.

Related Question