Show a moving marker on the map

Question

I am trying to make a marker move(not disappear and appear again) on the map as a vehicle moves on the road. 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. What I tried:[This is not a very efficient way, I know] My thought was to implement the above using the technique in points below: 1) Draw a line between the two. 2) Get the latLng of each point on 1/10th fraction of the polyline. 3) Mark the 10 points on the map along with the polyline. Here is my 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 ==…

Accepted Answer

For the marker to move relatively smoothly, you need to

- Update more than every 1/10 fraction of the polyline (at least every few pixels)

- Call the update method more frequently

- Don't delete and re-add the marker

For example, something like:

```
var counter = 0;
interval = window.setInterval(function() { 
  counter++;
  // just pretend you were doing a real calculation of
  // new position along the complex path
  var pos = new google.maps.LatLng(35, -110 + counter / 100);
  marker.setPosition(pos);
  if (counter >= 1000) {
    window.clearInterval(interval);   
  }
}, 10);
```

I made a simple example at http://jsfiddle.net/bmSbU/2/ which shows a marker moving along a straight path. If this is what you want, most of your code above regarding where along the line you are can be reused (or check out http://broady.github.io/maps-examples/points-along-line/along-directions.html )

Show a moving marker on the map

Solution

Problem

Related problems