title: Show a moving marker on the map
body: <p>I am trying to make a marker move(<strong>not disappear and appear again</strong>) on the map as a vehicle moves on the road.</p>
  
  <p>I have two values of latLng and I want to move the marker between the two till the next point is sent by the vehicle. And then repeat the process again.</p>
  
  <p><strong>What I tried:[This is not a very efficient way, I know]</strong></p>
  
  <p>My thought was to implement the above using the technique in points below:</p>
  
  <p>1) Draw a line between the two.</p>
  
  <p>2) Get the latLng of each point on 1/10th fraction of the polyline.</p>
  
  <p>3) Mark the 10 points on the map along with the polyline.</p>
  
  <p>Here is my Code:</p>
  
  <pre><code>var isOpen = false;
  var deviceID;
  var accountID;
  var displayNameOfVehicle;
  var maps = {};
  var lt_markers = {};
  var lt_polyLine = {};
  function drawMap(jsonData, mapObj, device, deleteMarker) {
      var oldposition = null;
      var oldimage = null;
      var arrayOflatLng = [];
  
      var lat = jsonData[0].latitude;
      var lng = jsonData[0].longitude;
      //alert(jsonData[0].imagePath);
  
      var myLatLng = new google.maps.LatLng(lat, lng);
  
      if (deleteMarker == true) {
          if (lt_markers["marker" + device] != null) {
              oldimage = lt_markers["marker" + device].getIcon().url;
              oldposition = lt_markers["marker" + device].getPosition();
              lt_markers["marker" + device].setMap(null);
              lt_markers["marker" + device] = null;
          }
          else {
              console.log('marker is null');
              oldimage = new google.maps.MarkerImage(jsonData[0].imagePath,
                                                       null,
                                                       null,
                                                        new google.maps.Point(5, 17), //(15,27),
                                                       new google.maps.Size(30, 30));
              oldposition = myLatLng;
          }
      }
  
  
      var image = new google.maps.MarkerImage(jsonData[0].imagePath,
                                                       null,
                                                       null,
                                                        new google.maps.Point(5, 17), //(15,27),
                                                       new google.maps.Size(30, 30));
      lt_markers["marker" + device] = new google.maps.Marker({
          position: myLatLng,
          icon: image,
          title: jsonData[0].address
      });
      if (oldposition == myLatLng) {
          alert('it is same');
          lt_markers["marker" + device].setMap(mapObj);
          mapObj.panTo(myLatLng);
      }
      else {
          alert('it is not same');
          var markMarker = null;
          var i = 10;
          for (i = 10; i &lt;= 100; i + 10) {
              //-------
              //  setTimeout(function() {
              if (markMarker != null) {
                  markMarker.setMap(null);
                  markMarker = null;
              }
              alert('inside the loop');
              var intermediatelatlng = mercatorInterpolate(mapObj, oldposition, myLatLng, i / 100);
              alert('Intermediate Latlng is :' + intermediatelatlng);
              arrayOflatLng.push(intermediatelatlng);
  
              var flightPath = new google.maps.Polyline({
                  path: arrayOflatLng,
                  strokeColor: "#FFFFFF",
                  strokeOpacity: 1.0,
                  strokeWeight: 1
              });
              flightPath.setMap(mapObj);
              if (i != 100) {
                  markMarker = new google.maps.Marker({
                      position: intermediatelatlng,
                      icon: image,
                      title: jsonData[0].address,
                      map: mapObj
                  });
  
              }
              else {
                  markMarker = new google.maps.Marker({
                      position: intermediatelatlng,
                      icon: oldimage,
                      title: jsonData[0].address,
                      map: mapObj
                  });                
              }
              mapObj.panTo(intermediatelatlng);
              //--------
              //   }, 1000);
          }
      }
  
  }
  function mercatorInterpolate(map, latLngFrom, latLngTo, fraction) {
      // Get projected points
      var projection = map.getProjection();
      var pointFrom = projection.fromLatLngToPoint(latLngFrom);
      var pointTo = projection.fromLatLngToPoint(latLngTo);
      // Adjust for lines that cross the 180 meridian
      if (Math.abs(pointTo.x - pointFrom.x) &gt; 128) {
          if (pointTo.x &gt; pointFrom.x)
              pointTo.x -= 256;
          else
              pointTo.x += 256;
      }
      // Calculate point between
      var x = pointFrom.x + (pointTo.x - pointFrom.x) * fraction;
      var y = pointFrom.y + (pointTo.y - pointFrom.y) * fraction;
      var pointBetween = new google.maps.Point(x, y);
      // Project back to lat/lng
      var latLngBetween = projection.fromPointToLatLng(pointBetween);
      return latLngBetween;
  }
  </code></pre>
  
  <p><strong>Problems Faced:</strong></p>
  
  <p>1) The marker is not showing up on the map because the process of plotting and removal of marker is so fast that the marker is not visisble on screen. I've tried setTimeOut, and It does not help at all.</p>
  
  <p>2) if I alow the browser to run this code for more than 5 minutes, the browser crashes.</p>
  
  <p><strong>Note:</strong> The Above function is called every 10 seconds using setInterval.</p>
  
  <p>What Can be a better solution? Please Help..</p>