Adjust KML layer transparency

Question

Is there a way to set the transparency of the kml layer when it is added? I add a kml layer that you do not see in the streets below. Is there any way to do 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

You cannot change the opacity of polygons in KmlLayer. You have three options (which I can think of):

• detect opacity in KML

• import KML into FusionTables and use the FusionTablesLayer (which allows you to change the opacity of the polygons)

• If KML is not too complicated, use a third-party parser ( geoxml3 or geoxml-v3 , which will parse KML and display it as native Google Maps Javascript API v3 objects (which allow you to change the opacity).

Answer 2

Since KML has been added by the Google Maps API as images in the DOM, you can change its opacity using CSS by searching for <img> elements containing "kml" in your src attribute:

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

Alternatively, you can achieve this with jQuery:

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

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

Answer 3

This solution is not ideal because it causes a small flash when the zoom levels change, but some of them may find this useful:

 google.maps.event.addListener(map, 'tilesloaded', function() { $("#map").find("img").css("opacity","0.5"); });