Display new markers when map bound changed and clear old marker

when map bound moved by user, make disappear old position markers and display new markers.

For an example you can check this map. Markers are moving every time bounds updated and clearing the old position markers. I am exactly trying to do this.

UPDATED 2

what I have done so far is right below. No errors but, still seeing all markers at once..?

data(){
     return {
        bounds:{},
        map: {},
        mapName: "map",
        estates: [], 
     }
},
mounted() {
    axios.get('/ajax').then((response) => {
        this.estates =  response.data
        this.insertMarkers();
    });
    this.initMap();

},
methods: {

    initMap: function(){

        //giving specific location of japan.
        this.bounds = new google.maps.LatLngBounds(
            new google.maps.LatLng(34.652500, 135.506302),
        );

        var mapOptions =
            {
                mapTypeId: 'roadmap'
            };

        this.map = new google.maps.Map(document.getElementById(this.mapName), mapOptions);

        var boundsListener = google.maps.event.addListener((this.map), 'bounds_changed', function (event) {
            this.setZoom(6);
            google.maps.event.removeListener(boundsListener);
        });

        this.map.fitBounds(this.bounds);
    },

    insertMarkers: function() {
        var markers1 = []
        var i = 0;
        var bounds = this.bounds;
        var map = this.map;
        // DB fetched data lat and lng inside estates array...
        var estates = this.estates;

        var ne_lat = 49.2474708477906;
        var ne_lng = 150.25256276310802;

        var sw_lat = 28.102649112693385;
        var sw_lng = 125.02795338810802;



        google.maps.event.addListener(map, 'idle', function() {

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

            markers1 = [];
            // giving margin for prevent edge pop up.
            ne_lng = map.getBounds().getNorthEast().lng()-0.01;
            sw_lng = map.getBounds().getSouthWest().lng()+0.01;
            ne_lat = map.getBounds().getNorthEast().lat()-0.01;
            sw_lat = map.getBounds().getSouthWest().lat()+0.01;
            console.log(ne_lng);
            console.log(sw_lng);
            console.log(ne_lat);
            console.log(sw_lat);

            //iterating markers locations...
            for(i = 0; i < estates.length; i++ ){
                var position = new google.maps.LatLng(estates[i].lat, estates[i].lng);
                      bounds.extend(position);
                var marker = new google.maps.Marker({
                    position: position,
                    map: map,
                    icon: '/img/marker.png',
                    url: "/pages/" + estates[i].id,
                });

                google.maps.event.addListener(marker, 'click', function () {
                    window.location.href = this.url;
                });
                markers1.push(marker);
            }
        });
},

Controller

public function ajax(Request $request){

    $fromLat = $request->get('fromLat');
    $toLat = $request->get('toLat');
    $fromLng = $request->get('fromLng');
    $toLng = $request->get('toLng');


    $data = \DB::table('allestates')
      ->where('lat', '>', $fromLat)
      ->where('lat', '<', $toLat)
      ->where('lng', '>', $fromLng)
      ->where('lng', '<', $toLng)
      ->get();

      $response = response()->json($data);
      return $response;

}

from Display new markers when map bound changed and clear old marker