0

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)
user3734823
  • 99
  • 1
  • 1
  • 10
  • You have to store the markers in an array and remove them first before adding new ones. Because in your scenario you do not have 3 markers and then 2, but 5. Only they overlap exactly so you do not see that they are duplicates. Refer to this to remove markers: https://stackoverflow.com/questions/1544739/google-maps-api-v3-how-to-remove-all-markers – VDWWD Feb 08 '18 at 22:21
  • remove old markers in every add – Mahdi Younesi Feb 08 '18 at 22:27

1 Answers1

0

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++) {
Seano666
  • 2,238
  • 1
  • 15
  • 14