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>
Answer
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!