Check for checkbox value after Google Map has loaded

Question

I think I'm missing something basic about javascript. I could use your help!

Scenario: After clicking "search" the google map loads. As it loads, a checkbox appears that says, "Redo results when map is moved" (similar to yelp). If the map is dragged or zoomed, the results update. That part works fine.

Problem: The value of the checkbox (true or false) is recognized by the redo() function when the map loads, and it doesn't check it again after that (because even though redo() is updating the results it's not reloading the map). So if you toggle the checkbox, the "redo" function doesn't notice!

Simplified Code:

//HAML
%input{:type => "checkbox", :id => "followCheck", :name => "followCheck", :onclick => 'handleClick();'}

//load the map
function showLocations() { 
  map = new google.maps.Map(document.getElementById("map_canvas"), {
    bunch of map stuff;
    map.fitBounds(bounds);
    redo(); //this is the redo function, see below
  }
}

function handleClick(checkbox) {
  var chk = document.getElementById("followCheck").checked;
  console.log("checkbox value is currently " + chk);
  return chk;
}

function redo() {
  var chk = handleClick();
  console.log("inside redo, value is " + chk);
   if (chk == true) {
     google.maps.event.addListener(map, 'mouseup', function() {
       mapAdjusted = 1;
       updateMapAfterUserInteraction();
     });
     google.maps.event.addListener(map, 'zoom_changed', function() {
       mapAdjusted = 1;
       updateMapAfterUserInteraction();
     });
   }
}

(note, that redo() function was written by my collaborator, who is smarter than me and currently out of town.)

So, Redo() loads when the map loads. If the checkbox is true when the map loads, then the redo() function processes zoom/drag . But it still does it even after changing the value to false (and if the value is false when the page loads, the opposite happens).

What is needed to get redo() to see that the value has changed? push() ? bind() ? get/set? change() ? addEventListener() ? Should I reload the map when the checkbox is toggled (I'd rather not)? A whole new approach? I'm stuck! Thanks. I'm open to JQuery ideas, too.

Answer 1

I solved this. First off, with a small adjustment to the function I was able get it to turn ON after checking the box (even if the results loaded while the box was unchecked via a previous page session). Here is that code (I actually found like three variations that all had the same result):

function redo() {
  if ($("#followCheck").is(':checked')) {
    google.maps.event.addListener(map, 'mouseup', function() {
      mapAdjusted = 1;
      updateMapAfterUserInteraction();
    });
    google.maps.event.addListener(map, 'zoom_changed', function() {
      mapAdjusted = 1;
      updateMapAfterUserInteraction();
    });
  }
}

The problem was that it didn't turn off. And that's because I've added two listeners! This answer helped me remove the listeners. Note that (for me) it only worked when the removeListener() function is within the addListener() function. Kind of strange.

function redo() {
  var listener1 = google.maps.event.addListener(map, 'mouseup', function() {
    if (!$("#followCheck").is(':checked')) {
      google.maps.event.removeListener(listener1);
    } else {
      mapAdjusted = 1;
      updateMapAfterUserInteraction();
    }
  });
  var listener2 = google.maps.event.addListener(map, 'zoom_changed',  function() {
    if (!$("#followCheck").is(':checked')) {
      google.maps.event.removeListener(listener2);
    } else {
      mapAdjusted = 1;
      updateMapAfterUserInteraction();
    }
  });
}

Oh and I also changed onclick() to onchange()