Question

I am working on GMap customization. I want a floating circle to move across a a Polyline. My question is that can we get all LatLng points in a Polyline after a specific interval for eg, all LatLng at interval of 100meters. My polyline code is:

/** polyline **/
            var tpath = [
                    new google.maps.LatLng(15.508718,73.839337),
                    new google.maps.LatLng(15.511457,73.839165)
                ];
            var travelPath = new google.maps.Polyline({
                path : tpath,
                map : map,
                geodesic : true,
                strokeColor : '#000',
                strokeOpacity : 0.7,
                strokeWeight : 1
            });

i get only the end LatLng values. I want the values across the Polyline.
Thanks in advance.

Answer 1

You could use google.maps.geometry.spherical.computeHeading(startPoint, endPoint) to get the heading.

Then compute the distance with google.maps.geometry.spherical.computeDistanceBetween(startPoint, endPoint)

If the distance is 475m and you want to make ~100 jumps just do 475/round(475/100) to calculate the distance you want to move the circle each time. round(475/100) will give you how many times (iterations) you should move the circle.

Then you could use computeOffset(from:LatLng, distance:number, heading:number, radius?:number)

Then you can use computeOffset(circleCenter, distance, heading) to get the new cirecle center point in a for loop the amount of iterations calculated above. Don’t forget to include a delay in your loop.