google-maps google-maps-api-3 transparency kml

Maps v3 API kml layer change transparency on click

The final goal is to display a few kml overlays on one map and set the transparency value by clicking on a control button for each kml layer (depending on how much layers there are).

My first idea was changing opacity/transparency directly by the div layer.. but I can't find any way to address the div where the kml layer is shown in the map.

Does someone know a way to address the div where the KML is inserted by the KmlLayer(..)?

Now I'm trying to find a way to do it via the KmlLayer Object.. but so far no luck either..

Any ideas how to handle this?

The Code is:

(function() {
  window.onload = function(){

  var myLatlng = new google.maps.LatLng(48.1497, 11.5795);
  var myOptions = {
  zoom: 10,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var georssLayer = new google.maps.KmlLayer('somemap.kml',({'suppressInfoWindows': true}));
georssLayer.setMap(map);
}
})();

Solution

To the best of my knowledge it is not possible via standard google api but you can do this using jquery or some other library. KML images are just part of the DOM so if you can find the nodes you can manipulate their properties. If you have multiple KML files you will probably need to name your images so that the name reflects which KML image belongs to. so if you have KML1 prepend KML1 to all your image names in that KML and search for that string using jQuery selector.

Here is an example using jquery which targets all images (for searches on substrings see http://api.jquery.com/attribute-contains-selector/):

    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps JavaScript API v3 Example: KmlLayer KML</title> 
    <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){
    $(".b_opacity").click(function(){
//this will find all the images in the map canvas container. Normally you would want to target specific images by the value of src
    $("#map_canvas").find("img").css("opacity","0.4")

    })
    })


    function initialize() {
      var chicago = new google.maps.LatLng(41.875696,-87.624207);
      var myOptions = {
        zoom: 11,
        center: chicago,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

      var ctaLayer = new google.maps.KmlLayer('http://code.google.com/apis/kml/documentation/KML_Samples.kml');
      ctaLayer.setMap(map);
    }
    </script> 
    </head> 
    <body onload="initialize()"> 

      <div id="map_canvas" style="width: 600px;height: 600px;"></div> 
      <input type="button" value="dim the lights" class="b_opacity">
    </body> 
    </html>

NOTE: please bear in mind that the css property opacity does not work in IE you have to use filter:alpha(opacity=40) for IE or you can use jQuery .fade() method.