title: auto refresh markers every x seconds in php and js
body: <p>hello i am trying to auto refresh markers on the page who display google map.
  i searched for many hours and cant find a good solution for my example.</p>
  <p>please if someone has a good way for me ?</p>
  <p>i tried many methods but i cant have the result i want.</p>
  <p>...</p>
  <pre><code>var map;
  var geocoder;
  function loadMap() {
      var pune = {lat: 18.5204, lng: 73.8567};
      map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: pune
      });
  
      var marker = new google.maps.Marker({
      position: pune,
      map: map
      });
  
      var cdata = JSON.parse(document.getElementById('data').innerHTML);
      geocoder = new google.maps.Geocoder();  
      codeAddress(cdata);
  
      var allData = JSON.parse(document.getElementById('allData').innerHTML);
      showAllColleges(allData)
  }
  
  function showAllColleges(allData) {
      var infoWind = new google.maps.InfoWindow;
      Array.prototype.forEach.call(allData, function(data){
          var content = document.createElement('div');
          var strong = document.createElement('strong');
      
          strong.textContent = data.name;
          content.appendChild(strong);
  
          var img = document.createElement('img');
          img.src = 'img/Leopard.jpg';
          img.style.width = '100px';
          content.appendChild(img);
  
          var marker = new google.maps.Marker({
          position: new google.maps.LatLng(data.lat, data.lng),
          map: map
      });
  
          marker.addListener('mouseover', function(){
          infoWind.setContent(content);
          infoWind.open(map, marker);
      })
      
          marker.addListener('mouseup', function(){
          infoWind.close(map, marker);
      })
      })
    }
  
   function codeAddress(cdata) {
   Array.prototype.forEach.call(cdata, function(data){
      var address = data.name + ' ' + data.address;
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == 'OK') {
          map.setCenter(results[0].geometry.location);
          var points = {};
          points.id = data.id;
          points.lat = map.getCenter().lat();
          points.lng = map.getCenter().lng();
          updateCollegeWithLatLng(points);
        } else {
          alert('Geocode was not successful for the following reason: ' + status);
        }
      });
  });
  }
  </code></pre>
  <p>(here i set an interval :)</p>
  <pre><code>  setInterval(function updateCollegeWithLatLng(points) {
      $.ajax({
          url:&quot;action.php&quot;,
          method:&quot;post&quot;,
          data: points,
          success: function(res) {
          console.log(res)
      }
  })
  
  }, 3000)
  </code></pre>
  <p>the console message
  <br />
  <b>Notice</b>:  Undefined index: id in <b>/storage/ssd3/702/16987702/public_html/google-map-php-mysql-master/action.php</b> on line <b>4</b><br />
  <br />
  <b>Notice</b>:  Undefined index: lat in <b>/storage/ssd3/702/16987702/public_html/google-map-php-mysql-master/action.php</b> on line <b>5</b><br />
  <br />
  <b>Notice</b>:  Undefined index: lng in <b>/storage/ssd3/702/16987702/public_html/google-map-php-mysql-master/action.php</b> on line <b>6</b><br />
  Updated...</p>