Google Map API doesn't refresh markers correctly

Question

I am trying to display multiple markers on google map in real-time using ajax. Ajax fetches the marker array from a webservice function as below. When the array has 1 or 2 coordinates index, refreshing works fine. However, if the array has more than 2 coordinates, then problem started.

For example, if I have 3 points to mark in the array like, [ [23,32],[45,34],[34,34] ], then my code displays these on the map. Then if I change my display option, the array function removes one of them like [ [23,32],[34,34] ], so only two markers should be displayed on the map, but the map still shows three markers. I really do not see what causes the problem. Does anyone know how to resolve this problem?

function initMap() {
                var center1 = { lat: 33.9636, lng: -84.1191 };
                var bounds = new google.maps.LatLngBounds();
                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 10,
                    center: center1
                });


                var marker = new google.maps.Marker({});

                setInterval(function () {
                    $.ajax({
                        type: "POST",
                        url: "WebService.asmx/read_marker_array",
                        data: '{}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {

                            if (test !== null && test !== '') {
                                if (JSON.stringify(test) !== JSON.stringify(data)) {
                                  alert('UPDATED!!!!!!')
                                    test = data;
                                                                }
                            }
                            else {
                                //alert('LOADED FIRST TIME!!!')
                                test = data;
                            }
                            marker.setMap(null);


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



                                var position = new google.maps.LatLng(data.d[i].o_lat, data.d[i].o_lng);

                                bounds.extend(position);

                                marker = new google.maps.Marker({
                                    position: position,
                                    map: map,
                                    title: data.d[i].transNo
                                });
                                var infowindow = new google.maps.InfoWindow();


                                google.maps.event.addListener(marker, 'click', (function (marker, i) {
                                    return function () {
                                        infowindow.setContent(data.d[i].content);
                                        infowindow.open(map, marker);
                                    }
                                })(marker, i));

                            }
                        },
                        error: function () {
                            alert('Connection error111, please retry');
                        }


                    }); //end of ajax
                }, 3000)

Answer 1

Loop through and delete the markers before you build ones with new data, something like..

marker.setMap(null);

//Loop through all the markers and remove
        for (var i = 0; i < map.markers.length; i++) {
            map.markers[i].setMap(null);
        }

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