Efficiency can be inefficient

Sometimes, on the course of coding, we do what seems like a harmless change. A change rooted in a desire to reduce our variable use, or put as much onto one line and "look cool".

Perhaps you've run into this problem. Hopefully this will give someone some help. "Help, I'm trying to remove a marker from google maps and it says "setMap" is not a function". Or really any function that a marker would have in google map.

Let me tell you a tale of the errant delete key.

In Google's map documentation, you will see creation code for markers like this:

  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {lat: 59.327, lng: 18.067}
  })

  marker.addListener('click', toggleBounce);

Remembering chaining (most likely in jQuery), you remember that you can often take those uses of marker and condense them, like this:

  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {lat: 59.327, lng: 18.067}
  }).addListener('click', toggleBounce);

Seems kosher. After all, it was working on a marker in both cases. And in fact, you are right, it is working on a marker in both cases.

However, the variable marker, in this case, won't have an instance of Goole Map Marker, it will have an instance of Google Map Marker Events (or something to that effect).

The .addListener method does not return a google Marker. So the marker variable would get something other than a marker.

Which mean you will not be able to execute any marker methods on it.

Solution: don't delete the marker from the addListener. Let it run independently. Chaining only works when you return the same object. For example, here:

In an object, you can get away with this:

var t = new Test(10);

var a = t.double().double().add2().halve()

If every method that you are chaining returns the original object. Or the method you are invoking will be on the returned object. That means crafting your methods like this:

  halve(){
    this.val /2;
    return this;
  }
  add2(){
    this.val += 2;
    return this;

  }

Notice how every method returns the original object so it can be used in successive function calls.

You could do something like this from the example code:

var a = t.double().double().add2().halve().get().toFixed(2)

Notice how I am doing toFixed at the end of the chain. "get" returns a number, and toFixed is a method of a Number.

Hope it helps!