How to get Lat Long of moving object on google maps?

Question

I am working on Google maps, and in my map I have build a moving object using Animating Symbols article

my question is that I want to get the location of moving object (

Answer 1

Unfortunately i don't think you can get Lat Long of a SymbolPath with the Google Maps API.

If you console.log the icons[0] you will see that the icon object only have path, scale and strokeColor:

console.log(icons[0].icon)

{ 
  path: 0, 
  scale: 8, 
  strokeColor: "#393"
}

Answer 2

The symbol doesn't have a position, but you can calculate it:

var position = google.maps.geometry.spherical.interpolate(lineCoordinates[0], lineCoordinates[1], (count / 200));

proof of concept fiddle

function animateCircle() {
  var infowindow = new google.maps.InfoWindow();
  var count = 0;
  window.setInterval(function () {
    count = (count + 1) % 200;

    var icons = line.get('icons');
    icons[0].offset = (count / 2) + '%';
    line.set('icons', icons);
    var position = google.maps.geometry.spherical.interpolate(lineCoordinates[0], lineCoordinates[1], (count / 200));
    if (!marker) {
        marker = new google.maps.Marker({
            position: position,
            map: map
        });
        infowindow.setContent(marker.getPosition().toUrlValue(6));
        infowindow.open(map,marker);
    } else {
        marker.setPosition(position);
    }
    infowindow.setContent(marker.getPosition().toUrlValue(6));
  }, 20);
}

code snippet:

// This example adds an animated symbol to a polyline.

var line;
var marker;
var lineCoordinates;
var map;

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(20.291, 153.027),
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  lineCoordinates = [
    new google.maps.LatLng(22.291, 153.027),
    new google.maps.LatLng(18.291, 153.027)
  ];

  // Define the symbol, using one of the predefined paths ('CIRCLE')
  // supplied by the Google Maps JavaScript API.
  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: '#393'
  };

  // Create the polyline and add the symbol to it via the 'icons' property.
  line = new google.maps.Polyline({
    path: lineCoordinates,
    icons: [{
      icon: lineSymbol,
      offset: '100%'
    }],
    map: map
  });

  animateCircle();
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle() {
  var infowindow = new google.maps.InfoWindow();
  var count = 0;
  window.setInterval(function() {
    count = (count + 1) % 200;

    var icons = line.get('icons');
    icons[0].offset = (count / 2) + '%';
    line.set('icons', icons);
    var position = google.maps.geometry.spherical.interpolate(lineCoordinates[0], lineCoordinates[1], (count / 200));
    if (!marker) {
      marker = new google.maps.Marker({
        position: position,
        map: map
      });
      infowindow.setContent(marker.getPosition().toUrlValue(6));
      infowindow.open(map, marker);
    } else {
      marker.setPosition(position);
    }
    infowindow.setContent(marker.getPosition().toUrlValue(6));
  }, 20);
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&ext=.js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>