I have set store locator using google map javascript api. when someone enter their location they will find the stores within the 50km of radius. I want when user search for 2nd time the previous(first search) marker will be removed. I have added 4 locations(store locators) on google map.
JS CODE:
if(myCity.getBounds().contains( new google.maps.LatLng( location1 ) ) ){
var location1_marker = new google.maps.Marker({
title:'sleep dallas',
position: location1,
map: map,
icon: {
labelOrigin: new google.maps.Point(40, 80),
url: 'css/marker-2.png',
size: new google.maps.Size(80, 80),
},
});
}else if ( myCity.getBounds().contains( new google.maps.LatLng( location2 ) ) ) {
var location2_marker = new google.maps.Marker({
position: location2,
map: map,
icon: {
labelOrigin: new google.maps.Point(40, 80),
url: 'css/marker-2.png',
size: new google.maps.Size(80, 80),
},
});
}else if ( myCity.getBounds().contains( new google.maps.LatLng( location3 ) ) ) {
var location3_marker = new google.maps.Marker({
title:'sleep better',
position: location3,
map: map,
icon: {
labelOrigin: new google.maps.Point(40, 80),
url: 'css/marker-2.png',
size: new google.maps.Size(80, 80),
},
});
}else if ( myCity.getBounds().contains( new google.maps.LatLng( location4 ) ) ) {
var location4_marker = new google.maps.Marker({
title:'sleep better',
position: location4,
map: map,
icon: {
labelOrigin: new google.maps.Point(40, 80),
url: 'css/marker-2.png',
size: new google.maps.Size(80, 80),
},
});
}else{
alert('There is no any clinic around the radius of 50km in your location...!');
}
// Try to hide other markers but failed, here need help
if(location1_marker.getMap()){
location2_marker.setMap(null)
location3_marker.setMap(null)
location4_marker.setMap(null)
}else if(location2_marker.getMap()){
location1_marker.setMap(null)
location3_marker.setMap(null)
location4_marker.setMap(null)
}else if(location3_marker.getMap()){
location1_marker.setMap(null)
location2_marker.setMap(null)
location4_marker.setMap(null)
}else if(location4_marker.getMap()){
location1_marker.setMap(null)
location2_marker.setMap(null)
location3_marker.setMap(null)
}else{
alert('Nothing happend');
}
I'd rather suggest you use a list of markers.
When you push a new marker to the list, you can check the list's length, and if it's past a certain threshold, you can get set it to null followed by removing it from the list.
As an example:
const THRESHOLD = 3 // up to 3 active markers
let list = [] // list of markers
const onAddMarker = marker => {
// init marker
let marker = new google.maps.Marker([...opts])
// push marker to list
list.push(marker)
// check list length and remove oldest marker (if needed)
if (list.length > THRESHOLD)
list.shift().setMap(null)
}