Auto-update marker location on Google Maps Javascript API

Question

We are using MySQL and PHP to store the current location coordinates (latitude and longitude) after regular intervals. This is our code to add markers to the map from location coordinates fetched from the database.

I want to auto-update the marker's location on the map using updated coordinates from the database without refreshing the map. I have tried searching over the internet but couldn't find a solution that would help to update the coordinates in real time. Any help will be highly appreciated.

<div id="map"></div>
 <script>
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 16,
      center: new google.maps.LatLng( lat , long),
      mapTypeId: 'roadmap'
    });

    var iconBase = 'XXXXXXX';
    var icons = {
      spot: {
        icon: 'XXXXXX'
      },
      0: {
        icon: iconBase + 'XXXXX'
      },
      1: {
        icon: iconBase + 'XXXX'
      },
    };

     function addMarker(feature) {
      var marker = new google.maps.Marker({
        position: feature.position,
        icon: icons[feature.type].icon,
        map: map
      });
      map.setCenter(marker.getPosition())
        if(feature.type!="spot"){
         var content = '<font color="#636363"><h3><img src="http://XXXX"> '+feature.rto+'<br><img style="vertical-align: middle" src="http://XXXXXXX"> <a style="text-decoration:none" href="tel:+91'+feature.phone+'">'+feature.phone+'</a></h3></font>';  
     }
     else {
        var content = '<b>Address: </b>'+feature.address+'<br><b>Information: </b>XXXXXXXX';
     }
        var infowindow = new google.maps.InfoWindow()

        google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
            return function() {
                infowindow.setContent(content);
                infowindow.open(map,this);
            };
        })(marker,content,infowindow)); 
    }

    var features = [
      {
        <?php echo "position: new google.maps.LatLng(".$lat.", ".$long."),";
        echo "type: 'spot',
        address: '".$r['address']."'";
        ?>
      } 
      <?php
        $e = mysqli_fetch_assoc(mysqli_query($con, "select distpref,radius from XXXXX XXXXXXXXXXXXXXX"));
        $er = $e['radius'];
        $dp = $e['distpref'];
      $sql = "SELECT *, ( $dp * acos( cos( radians(" . $lat . ") ) * cos( radians( latitude ) ) * cos( radians( longitude ) - radians(" . $long . ") ) + sin( radians(" . $lat . ") ) * sin( radians( latitude ) ) ) ) AS distance FROM markers HAVING distance<$er";

      $result = mysqli_query($con, $sql);
      while($row = mysqli_fetch_assoc($result)) {
      echo ", {
        position: new google.maps.LatLng(".$row['latitude'].", ".$row['longitude']."),
        type: '".$row['type']."',
        phone: '".$row['phone']."'
        }";
      }
      ?>
    ];

    for (var i = 0, feature; feature = features[i]; i++) {
      addMarker(feature);
    }
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap">
</script>`

Any alternative solutions will also be acceptable.

Answer 1

I couldn't live update multiple markers simultaneously. Instead, when the trip starts, I removed all markers and started to live update only one specific marker using Ajax and setInterval command.