How to remove all markers from google map before adding new ones

Question

There is an asp.net web form to show the location of a moving object in google map. According to a given interval it fetches the current location of the object from the database and update it on the map.

Everything works fine. But per each interval it adds same markers on top of the previous ones. I want to clear the markers on the map before fetch the current data from database. I used markers.setMap(null) before calling current values. Then it doesn't show any marker on the map. Any help would be appreciated.

    window.onload = function () {
        LoadGoogleMap();
    }

    var markers = [];
    var map;
    function LoadGoogleMap() {
         markers = GetMapData();
        var mapOptions = {
            center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var infoWindow = new google.maps.InfoWindow();
         map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);

        setInterval(SetMarker, 5000);
    }

function SetMarker() {

        //markers.setMap(null)

        markers = [];
        markers = GetMapData();
        for (i = 0; i < markers.length; i++) {
            var data = markers[i]
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            var icon = "";
            icon = data.color;
            icon = "http://maps.google.com/mapfiles/ms/icons/" + icon + ".png";
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.Name,
                icon: new google.maps.MarkerImage(icon)
            });

        } 
       };

 function GetMapData() {
        var json = '';
        $.ajax({
            type: "POST",
            url: "WebForm4.aspx/GetData",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            success: function (resp) {
                json = resp.d;
            },
            error: function () { debugger; }
        });
        return json;
    }

score 1 · Answer 1 · answered Jun 21 '16 at 08:30

I found the answer as follows....

<script type="text/javascript">
    window.onload = function () {
        LoadGoogleMap();
    }


    var markers;
    var map;
    var markers1 = [];
    function LoadGoogleMap() {
        var mapOptions = {
            center: new google.maps.LatLng('6.894373', '79.857963'),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var infoWindow = new google.maps.InfoWindow();
        map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
        setInterval(SetMarker, 3000);

    }


    function SetMarker() {

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

        for (i = 0; i < markers.length; i++) {

            var data = markers[i]
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            var icon = "";
            icon = data.color;
            icon = "http://maps.google.com/mapfiles/ms/icons/" + icon + ".png";
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.Name,
                icon: new google.maps.MarkerImage(icon)
            });
            markers1.push(marker);
            //var infoWindow = new google.maps.InfoWindow();
            //infoWindow.setContent("<div style = 'width:50px;min-height:20px'>" + data.Description + "</div>");
            //infoWindow.open(map, marker);
        }
    };


    function GetMapData() {
        var json = '';
        $.ajax({
            type: "POST",
            url: "WebForm5.aspx/GetData",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            success: function (resp) {
                json = resp.d;
            },
            error: function () { debugger; }
        });
        return json;
    }



</script>

How to remove all markers from google map before adding new ones

1 Answers1