Google Map V3 .png groundoverlay opacity

I have created my first Google Map API with png overlays (thanks to @andresf for assistance).

This map has multiple png ground overlays adjacent to each other and can be seen at http://www.earthstation.mobi/coverage.htm

Question: How do I set the opacity (transparency?) on each overlay so that I can see the map detail under the overlay? I do not need to adjust this from the webpage, a preset coded into the script will suffice.

The code of the page listed above is:

 <!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 <title>Earthstation WIMAX Coverage</title>
 <script src="http://maps.googleapis.com/maps/api/js?key=MY_API_KEY&sensor=false"
      type="text/javascript"></script>
  <script type="text/javascript">

  function initialize() {

  var myOptions = {
            center: new google.maps.LatLng(-18.975750, 32.669184),
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.HYBRID
          };

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

  //note to self co-ords are SW and then NE
  var imageBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(-19.000417,30.999583),
    new google.maps.LatLng(-17.999583,32.000417));

  var oldmap = new google.maps.GroundOverlay(
    "http://www.earthstation.mobi/cloakpS19E031.png",imageBounds);
    oldmap.setMap(map);

    var imageBounds2 = new google.maps.LatLngBounds(
    new google.maps.LatLng(-19.000417,31.999583),
    new google.maps.LatLng(-17.999583,33.000417));

  var oldmap = new google.maps.GroundOverlay(
    "http://www.earthstation.mobi/cloakpS19E032.png",imageBounds2);
    oldmap.setMap(map);

    var imageBounds3 = new google.maps.LatLngBounds(
    new google.maps.LatLng(-20.000417,30.999583),
    new google.maps.LatLng(-18.999583,32.000417));

  var oldmap = new google.maps.GroundOverlay(
    "http://www.earthstation.mobi/cloakpS20E031.png",imageBounds3);
    oldmap.setMap(map);

 var imageBounds4 = new google.maps.LatLngBounds(
    new google.maps.LatLng(-20.000417,31.999583),
    new google.maps.LatLng(-18.999583,33.000417));

  var oldmap = new google.maps.GroundOverlay(
    "http://www.earthstation.mobi/cloakpS20E032.png",imageBounds4);
    oldmap.setMap(map); 

}

 </script>
  </head>
  <body onload="initialize()">
  <div id="map_canvas" style="width: 1000px; height: 600px"></div>
  </body>
  </html>

Problem solved!

After declaring the var MyOptions, add

 var overlayOpts = {
      opacity:0.3
  }

Then call the variable in the .GroundOverlay call, directly after calling ImageBounds

i.e.

var oldmap = new google.maps.GroundOverlay(
"http://www.earthstation.mobi/cloakpS19E031.png",imageBounds, overlayOpts);
oldmap.setMap(map);

This same call is then used in each .groundoverlay call, assuming you want the same opacity setting for each overlay. If not, decalre another var and call that.

Finished product can be seen http://www.eartshtation.mobi/coverage.htm - In Firefox, Ctrl U will show you the source code.

Hope this helps somebody avoid the 3 days I spent searching for this solution!

this solved the same problem in my case - http://www.usnaviguide.com/v3maps/ProjectedOverlayTest.htm

With the library (http://www.usnaviguide.com/v3maps/js/ProjectedOverlay.js) inside the code you can easily change transparency by overlay.setOpacity()

来源：https://stackoverflow.com/questions/11132537/google-map-v3-png-groundoverlay-opacity

标签

google-maps-api-3

maps

png

opacitymask