How to hide Google Maps Api Markers with jQuery

Expanding on Ben's notes, this should go where you have declared your marker - for example:

var beachMarker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: image
});
google.maps.event.addListener(beachMarker, 'click', function() {
  beachMarker.setVisible(false); // maps API hide call
});
}

It's taken me ages trying to figure this out. Huge credit to Ben! Thanks!

You can show a marker by setting the visibility true and hide it by setting the visibility false

marker.setVisible(false); // hide the marker

temp_marker is a Javascript object, not a DOM element. To attach a listener to the marker (the API will handle the specifics of which DOM element to attach to and how), you should use the Google Maps API's own events system like:

  google.maps.event.addListener(marker, 'click', function() {
    marker.setVisible(false); // maps API hide call
  });

Their documentation: Google Maps Javascript API v3 - Events

Ben provided you with half the answer. Once you are able to detect the marker click event you need to "hide" or remove the marker from the map. The standard way for doing this with google maps is to do this:

this.setMap(null);

You can then show the map again be using setMap to assign your map object instead of null.