Geek Answers Handbook

Google Map V3.png groundoverlay opacity

I created my first Google Maps API with png overlays (thanks @andresf for the help).

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

Question: How to set transparency (transparency?) On each overlay so that I can see map details under overlay? I do not need to configure this from a web page, just pre-set the encoding in the script.

Code for the above page:

<!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=AIzaSyAGbZjXr2wr7dT2P3O5pNo5wvVF3JiaopU&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>

Thanks for waiting Brian Zimbabwe

+4
source share
2 answers

The problem is solved!

After declaring var MyOptions add

  var overlayOpts = { opacity:0.3 }

Then call the variable in the .GroundOverlay call, right after the ImageBounds call

i.e.

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

The same call is then used in every .groundoverlay call, assuming you want to have the same opacity setting for each overlay. If not, add another var and call it.

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

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

+10
source

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

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

+2
source

More articles:


All Articles