-1

I am trying to control the opacity of a custom overlay that I have created using the Google Maps API. Nothing new here so I searched Stack Overflow and came across this tutorial from this question.

I'm not a JavaScript expert so I'm having some troubles. I looked through the code, and tried to adapt it with what I already have, but no luck so far. If I check for error messages in Firebug, I get the following message: Uncaught TypeError: Cannot read property 'length' of undefined

If you look through my JSFiddle here, you can see that the error is on Line 8 relating to var tileCount. I am not sure how to tweak this part of the code to make it work with what I have, which is a single image and not tiles as in the tutorial.

The slider... slides, but doesn't change the opacity. The knob/handle is missing initially as well.

Thanks for your help and guidance.

P. S. Yes, I know the custom overlay isn't perfectly aligned with the map background, but this is just an experiment/learning process.

P. P. S. I reposted this question since I realized I had inserted the wrong link.

1
  • Please fix the original question, don't repost it.
    – geocodezip
    Oct 25, 2013 at 22:46

1 Answer 1

1

You could try to solve this issue with jquery.

Here is a quick fix in your code.

Just a couple of a new strings:

TestOverlay.prototype.setOpacity = function (op) {
   //Set opacity to all layer's divs (range from 0.00 to 1.00)
  $("div.myLayer").css("opacity", op/100);
}

TestOverlay.prototype.onAdd = function () {
  ...
  //Set class name for opacity
  div.className = "myLayer";

  this.div_ = div;

  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
};

Opacity range is between 0 and 1. The slider from your example returns 0 - 20. Need to tune it a little bit.

2
  • Thanks for your help! How do I change the range of the slider though? I was looking into the jQuery UI slider as well. I wonder if that can be used instead? And do you know why the knob is not showing up until the slider is clicked?
    – kaoscify
    Oct 26, 2013 at 4:15
  • You are welcome. Here is the version with jQuery UI: jsfiddle.net/sasha_thor/H7EAD/22 Oct 26, 2013 at 5:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.