title: Move Google Map marker dynamically using javascript
body: <p>I have a div where I show user's current location. What I need is, when user moves, the marker should move dynamically using users curent location which is fetched through ajax and from my database. The map is initiated through mouse onclick event since there are multiple users. My entire code block looks like this:
  HTML Part: </p>
  
  <pre><code>&lt;div id="map" class="mapBlock" style="width: 100%; height: 400px;"&gt;&lt;/div&gt;
  &lt;button class="btn btn-info btn-sm mr-2 trackUser" data-toggle="modal" data-target="#trackUser"  data-did="&lt;?php echo trim($user['did']);?&gt;" onclick="getDid(this.getAttribute('data-did'));"&gt;Track User&lt;/button&gt;
  </code></pre>
  
  <p>Javascript Part:</p>
  
  <pre><code>    var position = [10.1563183,76.3882613];
      var did = 1;
      var cord = [10.1563183,76.3882613];
  
      function getDid(x){
          did = x;
          initialize();
          //Load google map
          google.maps.event.addDomListener(window, 'load', initialize);
      }
  
      function initialize() { 
          var latlng = new google.maps.LatLng(position[0], position[1]);
          var myOptions = {
              zoom: 18,
              center: latlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          map = new google.maps.Map(document.getElementById("map"), myOptions);
  
          marker = new google.maps.Marker({
              position: latlng,
              map: map,
              title: "Latitude:"+position[0]+" | Longitude:"+position[1]
          });
          //auto refresh - update marker to current - position center
          var refreshId = setInterval("getLatLong(did)", 10000);
      }
      //get new lat/long
      function getLatLong(id) {
          var data = new FormData();
          data.append('did', id);
  
          var xhr = new XMLHttpRequest();
          xhr.open('POST', 'users/get_user_location', true);
          xhr.onload = function () {
              if(xhr.status !== 200){
                  return;
              }
              cord = this.responseText;
          };
  
          xhr.send(data);
  
          transition(cord);
      }
  
      var numDeltas = 100;
      var delay = 10; //milliseconds
      var i = 0;
      var deltaLat;
      var deltaLng;
  
      function transition(result){
          i = 0;
          deltaLat = (result[0] - position[0])/numDeltas;
          deltaLng = (result[1] - position[1])/numDeltas;
          moveMarker();
      }
  
      function moveMarker(){
          position[0] += deltaLat;
          position[1] += deltaLng;
          var latlng = new google.maps.LatLng(position[0], position[1]);
          marker.setTitle("Latitude:"+position[0]+" | Longitude:"+position[1]);
          marker.setPosition(latlng);
  
          if(i!=numDeltas){
              i++;
              setTimeout(moveMarker, delay);
          }
      }
  </code></pre>
  
  <p>Everything is working fine but when the setinterval function is fired, the marker get disappeared.</p>