title: How to update the markers in real-time using ajax
body: <p>May I know how do I update the location in real-time, if the location value has been changed. The current code is what I used to retrieve the data from the database. I tried many solutions such as set interval or timeout but that did not help me in solving the problem.</p>
  
  <pre><code>$.ajax({
  
      type: "GET",
      url: ')',
  
      success: function (data, status, xhr) {
  
          for (var i = 0; i &lt; data.Table.length; i++) {
  
              if (createdA === false) {
  
                  for (var a = 0; a &lt;= 200; a++) {
  
                      a1 = data.Table[i].Latitude;
                      a2 = data.Table[i].Longitude;
                      a5 = data.Table[i].DeviceImei;
                  }
                  createMarkerA([a1, a2]);
                  shownA = true;
                  createdA = true;
                  setInterval(groupOne(), 10000);
              }
              else if (shownA === false) {
                  for (var a3 = 0; a3 &lt; 200; a3++) {
                      showMarker(markersA[a3]);
                      shownA = true;
                  }
  
              }
              else if (shownA === true) {
                  for (var a4 = 0; a4 &lt; 200; a4++) {
                      hideMarker(markersA[a4]);
                      shownA = false;
                  }
  
              }
  
          }
  
      },
  
      error: function (xhr) {
  
          alert(xhr.responseText);
  
      }
  
  });
  </code></pre>
  
  <p>//This is the code to initialize the map </p>
  
  <pre><code> //centers the map at using the 2 points as reference
      var center = L.bounds([, ], [, ]).getCenter();
  
      //it sets the map to the pre-defined div container
      var map = L.map('test_map').setView([center.x, center.y], 12);
  
      var basemap = L.tileLayer('https://maps-{s}.onemap.sg/v3/Original/{z}/{x}/{y}.png', {
          detectRetina: true,
          maxZoom: 20,
          minZoom: 11
      });
      basemap.addTo(map);
  
      var markersLayer = new L.LayerGroup();  //layer contain searched elements
  
      map.addLayer(markersLayer);
      var controlSearch = new L.Control.Search({
          position: 'topright',
          layer: markersLayer,
          initial: false,
          zoom: 18,
          marker: false
      })
      map.addControl(controlSearch);
  
  
  
      L.circle([, ], 50, { color: '#DA2E2E', opacity: 2, fillColor: 'blue', fillOpacity: .3 }).bindPopup('').addTo(map);
      L.circle([, ], 50, { color: '#DA2E2E', opacity: 2, fillColor: 'blue', fillOpacity: .3 }).bindPopup('').addTo(map);
  </code></pre>
  
  <p>// The code to initialize the markers </p>
  
  <pre><code>var markers = [];
  
  function pushMarker(marker) {
   markers.push(marker);
   }
  
  function createMarker(data) {
   var marker = new L.marker([data[0], data[1]]);
   pushMarker(marker);
   showMarker(marker);
   }
  
   //General Functions
   function hideMarker(marker) {
   map.removeLayer(marker);
    }
  
   function showMarker(marker) {
   map.addLayer(marker);
     }
  
     var createdA = false;
     var shownA = false;
     var markersA = [];
  
     var a1;
     var a2;
     var a5;
  
  
  
       function createMarkerA(data) {
  
        $.ajax({
  
      type: "GET",
  
      url: '',
  
  
      success: function (data, status, xhr) {
  
  
          for (var i = 0; i &lt; 4; i++) {
  
  
  
  
  
              var customPopup = 'Coordinates X: ' + data.Table[i].Latitude + '&lt;/br&gt;Coordinates Z: ' + data.Table[i].Longitude + '&lt;/br&gt;Station: ' + data.Table[i].Station + ' &lt;/br&gt; Box: ' + data.Table[i].Box + '&lt;/br &gt; Timestamp: ' + data.Table[i].LocationSend;
              var customOptions =
              {
                  'maxWidth': '500',
                  'className': 'custom'
              };
              var marker = L.marker(new L.LatLng(data.Table[i].Latitude, data.Table[i].Longitude, data.Table[i].Station));
              marker.bindPopup(customPopup, customOptions);
              pushMarker(marker);
              showMarker(marker);
  
  
          }
  
      },
  
  
      error: function (xhr) {
  
          alert(xhr.responseText);
  
      }
  
  
  
  });
  
    }
    function groupOne() {
  
  $.ajax({
  
  
      type: "GET",
      url: '',
  
  
      success: function (data, status, xhr) {
  
          for (var i = 0; i &lt; 4; i++) {
  
              if (createdA === false) {
  
                  for (var a = 0; a &lt; 200; a++) {
  
                      a1 = data.Table[i].Latitude;
                      a2 = data.Table[i].Longitude;
                  }
                  createMarkerA([a1, a2]);
                  shownA = true;
                  createdA = true;
  
              }
              else if (shownA === false) {
                  for (var a3 = 0; a3 &lt;= 4; a3++) {
                      showMarker(markersA[a3]);
                      shownA = true;
                  }
  
              }
              else if (shownA === true) {
                  for (var a4 = 0; a4 &lt;= 4; a4++) {
                      hideMarker(markersA[a4]);
                      shownA = false;
                  }
  
              }
  
  
  
  
  
          }
  
  
      },
  
  
  
  
      error: function (xhr) {
  
          alert(xhr.responseText);
  
      }
  
  
  
  
  });
  </code></pre>