I can't remove the new marker on hover

[simkessy]

I'm trying to setup different markers on hover. When I hover in, the new marker is presented, the old one removed. When I hover out, the initial marker returns but the new 1 stays below. This repeats and the new marker just keeps stacking up, never removed.

        $.each(venues, function(index, json) {

          json.marker = markers[index];

          var initialIcon =  json.picture;
          var hoverIcon ={
            url: "https://s3.amazonaws.com/pt-paperclip-assets/icons/map-icon-color.png",
            width: 24,
            height: 38
          };

          $(".venue-" + json.id).hover(function() {
            console.log("hover in")
            json.picture = hoverIcon;
            handler.removeMarker(json.marker);
            handler.addMarker(json);
          }, function() {
            console.log("hover out");
            handler.removeMarker(json.marker);
            json.picture = initialIcon;
            var newMarker = handler.addMarker(json);
            json.marker = newMarker;
          });
        });

[simkessy]

Solved it.

Make sure when you're setting the new marker you store it in a variable so you can remove that specific marker on hover out:

          addedMarker = {};
          $(".venue-" + json.id).hover(function() {
            json.picture = hoverIcon;
            handler.removeMarker(json.marker);
            addedMarker.marker = handler.addMarker(json);
          }, function() {
            handler.removeMarker(addedMarker.marker);
            json.picture = initialIcon;
            var newMarker = handler.addMarker(json);
            json.marker = newMarker;
          });
        });