'how to hide previous markers when new markers added in google map javascript api

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');
           }
javascriptphphtml


Solution 1:[1]

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)
    
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Eduard

Related Questions