This is my code, When i am calling removeMarkers(), it's not removing the markers.

```
function receiver(data, textStatus, XMLHttpRequest) {

var json = JSON.parse(data);

  for (var i = 0; i < json.length; i++) {
    var lat = json[i]["lat"];
    var lng = json[i]["lng"]; 
    // push object into features array
    features.push({ position: new google.maps.LatLng(lat,lng) });
  }

     features.forEach(function(feature) {
                var marker1 = new google.maps.Marker({
                    position: feature.position,
                    //icon: icons[feature.type].icon,
                    map: map
                });
            }); 
            gmarkers.push(marker1); 
}

function removeMarkers(){

    for(i=0; i<gmarkers.length; i++){
        gmarkers[i].setMap(null);
    }
}

```

This is my full code. For displaying places(church) that which i saved in my database along the route from origin to destination. If i changed the origin and destination i want to remove old markers and displaying new markers without refreshing the page.

css 

```
 <style>
          #map {
            height: 100%;
          }
          html, body {
            height: 100%;
            margin: 0;
            padding: 0;
          }
        </style> 

```

html

```
<div id="map" height="460px" width="100%"></div>
     <input type="text" id="distance" value="3" size="2">
     <input type="text" id="from" />to
     <input type="text" id="to"  />
     <input type="submit" onClick="route()" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?key=api_ key&libraries=places"></script>
    <script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/routeboxer/src/RouteBoxer.js" type="text/javascript"></script>

```

javascript

```
 <script>
        var map;
        var marker;
        var infowindow;
        var messagewindow;
        var boxpolys = null;
        var directions = null;
        var routeBoxer = null;
        var distance = null; // km
        var service = null;
        var gmarkers = [];
        var boxes = null;
        var coordinates=null;
        var features = [];
        var gmarkers = [];
    <?php
        echo "
        var lat={$lat}; 
        var lng={$lng};
        "
    ?>

      function initialize() {

        var location = {lat: 10.525956868983068, lng:76.21387481689453};
        map = new google.maps.Map(document.getElementById('map'), {
          center: location,
          zoom: 13
        });

        service = new google.maps.places.PlacesService(map);
         routeBoxer = new RouteBoxer();

  directionService = new google.maps.DirectionsService();
  directionsRenderer = new google.maps.DirectionsRenderer({
    map: map
  });
      }

function route() {

removeMarkers()
 clearBoxes();

  distance = parseFloat(document.getElementById("distance").value) * 0.1;
  var request = {
    origin: document.getElementById("from").value,
    destination: document.getElementById("to").value,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  }

  directionService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsRenderer.setDirections(result);

      var path = result.routes[0].overview_path;

      boxes = routeBoxer.box(path, distance);

       drawBoxes(); 
      findPlaces(0);
    } else {
      alert("Directions query failed: " + status);
    }
  });

}
function drawBoxes() {

  boxpolys = new Array(boxes.length);

  for (var i = 0; i < boxes.length; i++) {
    boxpolys[i] = new google.maps.Rectangle({
      bounds: boxes[i],
      fillOpacity: 0,
      strokeOpacity: 1.0,
      strokeColor: '#000000',
      strokeWeight: 0,
      map: map
    });
  }
}

function findPlaces(searchIndex) {

  var request = {
    bounds: boxes[searchIndex],
  };

  coordinates = boxes[searchIndex].toString().match(/[0-9]+\.[0-9]+/g);

  $.ajax({
                url:"http://localhost/church_finder/index.php/MapController/search_church",
                type:'POST',
                data:{coordinates:coordinates},
                //dataType:'json',
                 success: receiver
               });

    if (status != google.maps.places.PlacesServiceStatus.OVER_QUERY_LIMIT) {
      searchIndex++;
      if (searchIndex < boxes.length)
        findPlaces(searchIndex);
    } else { 
      setTimeout("findPlaces(" + searchIndex + ")", 1000);
    }
}

function clearBoxes() {

  if (boxpolys != null) {
    for (var i = 0; i < boxpolys.length; i++) {
      boxpolys[i].setMap(null);
    }
  }
  boxpolys = null;
}

function receiver(data, textStatus, XMLHttpRequest) {

var json = JSON.parse(data);
  for (var i = 0; i < json.length; i++) {
    var lat = json[i]["lat"];
    var lng = json[i]["lng"]; 
    features.push({ position: new google.maps.LatLng(lat,lng) });
  }     
     features.forEach(function(feature) {
                var marker1 = new google.maps.Marker({
                    position: feature.position,
                    map: map
                });
            }); 
            gmarkers.push(marker1); 
}

function removeMarkers(){

    for(i=0; i<gmarkers.length; i++){
        gmarkers[i].setMap(null);
    }
}

google.maps.event.addDomListener(window, 'load', initialize);
    </script>

```

[enter image description here](https://i.stack.imgur.com/hm1zn.png)
[![enter image description here](https://i.stack.imgur.com/EXjhe.png)](https://i.stack.imgur.com/EXjhe.png)