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.