Having an overlay on a Google map with two images contained within it, I am looking to adjust the opacity of the images when a user clicks on the overlay or on top of an image within the overlay. I attempted to utilize domlistener, but it did not yield the desired results. Below is the code snippet, any assistance would be much appreciated.
function initialize() {
var myLatlng = new google.maps.LatLng(31.6167,65.7167);
var mapProp = {
zoom:9,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.TERRAIN,
disableDefaultUI: true,
scrollwheel: false,
disableDoubleClickZoom: true,
panControl: false,
scaleControl: false,
touchmove: false
};
var map = new google.maps.Map(document.getElementById("map-canvas"),mapProp);
map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256)));
var swBound = new google.maps.LatLng(31.35,64.69);
var neBound = new google.maps.LatLng(31.95,65.39);
var bounds = new google.maps.LatLngBounds(swBound, neBound);
var srcImg = 'Capture.png';
var srcImg_2 = 'Lof1.png';
overlay = new USGSOverlay(bounds, srcImg, srcImg_2, map);
}
function USGSOverlay(bounds, image, img, map) {
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
this.img_ = img;
this.div_ = null;
this.setMap(map);
}
USGSOverlay.prototype.onAdd = function() {
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
var img = document.createElement('img');
img.src = this.image_;
img.style.width = '100%';
img.style.height = '100%';
img.style.position = 'absolute';
img.className= 'lof_class';
div.appendChild(img);
var image = document.createElement('img');
image.src = this.img_;
image.style.width = '100%';
image.style.height = '100%';
image.style.position = 'absolute';
image.className= 'lof_class';
div.className= 'carousel';
div.style.cursor= 'pointer';
div.setAttribute("data-slide","1");
div.appendChild(image);
this.div_ = div;
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
var me = this;
google.maps.event.addDomListener(div, 'click', function() {
image.style.opacity= '0.5';
});
};