Using Google Maps to trace a line showing the distance traveled

Question

Using Google Maps to trace a line showing the distance traveled

I want to create a 'distance traveled' polyline along a set route using V3 of the Google Maps API.

The polyline should pass through multiple waypoints/legs.

Currently, I am using the DirectionsService to draw the entire route.

In addition, I am utilizing epolys.js to obtain the marker position for the distance traveled.

Instead of copying the complete route into a new polyline, I only want to copy the route up to the marker position.

To see a demo, visit: http://codepen.io/1983ron/pen/wKMVQr

Here is where I am with the JavaScript code:

var geocoder;
var map;
var marker;
var gmarkers = [];
var METERS_TO_MILES = 0.000621371192;
var walked = (Math.round(670 * 1609.344));

// More JS code...
...
...

Any assistance would be greatly appreciated.

javascript google-maps google-maps-api-3 google-polyline

Answer 1

Answer №1

As you construct the line, calculate its length. Once it exceeds the "walked" distance, stop adding points to it.

var lengthMeters = 0;
var legs = response.routes[0].legs;
for (i = 0; i < legs.length; i++) {
    var steps = legs[i].steps;
    for (j = 0; j < steps.length; j++) {
        var nextSegment = steps[j].path;
        for (k = 0; k < nextSegment.length; k++) {
            if (lengthMeters <= walked) { 
                // Keep adding to the polyline if its length is less than "walked"
                polyline.getPath().push(nextSegment[k]);
                if (polyline.getPath().getLength() > 1) {
                   var lastPt = polyline.getPath().getLength() - 1;
                   lengthMeters += google.maps.geometry.spherical.computeDistanceBetween(polyline.getPath().getAt(lastPt - 1), polyline.getPath().getAt(lastPt));
               }
            }
            bounds.extend(nextSegment[k]);
         }
    }
}
polyline.setMap(map);

View proof of concept fiddle here

https://i.sstatic.net/tZh5l.png

Code Snippet:

var geocoder;
var map;
var marker;
var gmarkers = [];
var METERS_TO_MILES = 0.000621371192;
var walked = (Math.round(670 * 1609.344));
// More code snippets...

html,
body,
#map,
#container {
  height: 100%;
  width: 100%;
  background: #000;
  padding: 0px;
  margin: 0px;
}

<div id="container">
  <div id="map"></div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE">
</script>

Answer 2

As you construct the line, calculate its length. Once it exceeds the "walked" distance, stop adding points to it.

var lengthMeters = 0;
var legs = response.routes[0].legs;
for (i = 0; i < legs.length; i++) {
    var steps = legs[i].steps;
    for (j = 0; j < steps.length; j++) {
        var nextSegment = steps[j].path;
        for (k = 0; k < nextSegment.length; k++) {
            if (lengthMeters <= walked) { 
                // Keep adding to the polyline if its length is less than "walked"
                polyline.getPath().push(nextSegment[k]);
                if (polyline.getPath().getLength() > 1) {
                   var lastPt = polyline.getPath().getLength() - 1;
                   lengthMeters += google.maps.geometry.spherical.computeDistanceBetween(polyline.getPath().getAt(lastPt - 1), polyline.getPath().getAt(lastPt));
               }
            }
            bounds.extend(nextSegment[k]);
         }
    }
}
polyline.setMap(map);

View proof of concept fiddle here

https://i.sstatic.net/tZh5l.png

Code Snippet:

var geocoder;
var map;
var marker;
var gmarkers = [];
var METERS_TO_MILES = 0.000621371192;
var walked = (Math.round(670 * 1609.344));
// More code snippets...

html,
body,
#map,
#container {
  height: 100%;
  width: 100%;
  background: #000;
  padding: 0px;
  margin: 0px;
}

<div id="container">
  <div id="map"></div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE">
</script>

Using Google Maps to trace a line showing the distance traveled

Answer №1

Similar questions

trouble seeing images with an array input and ngFor in Angular

React and Axios: Overcoming CORS Policy to Connect with Java/SpringBoot REST Backend Service

Exploring the Crossroads of JSP and External Javascript Documents

Styling a nested scrollbar using JQuery

Building the logic context using NodeJS, SocketIO, and Express for development

A dynamic Angular search box designed for filtering columns in a table

What is the best way to determine in component.html whether the column type is equal to 1 to show the label text "Active,"

The array in this.props (passed down by redux) comes back as undefined

Retrieve the AngularJS scope object by using an alternate scope object as the identifier

What is the best way to pass a value to a modal and access it within the modal's component in Angular 8?

Ways to create a URL path that is not case-sensitive in NextJs using JavaScript

An AngularJS error has been caught: [$injector:modulerr]

Ensuring data integrity within table rows using Angular to validate inputs

Prevent dragging events while clicking on a link

Encountering a Null Pointer Exception when trying to locate an element on an AngularJS website using Selenium

Rails 4 experiences a strange phenomenon where Ajax is triggered twice, resulting in the replacement of

Can preloading data from a website impact the accuracy of my google analytics data?

When an SVG image is embedded, its color may not change even after being converted to an inline SVG

Incorporating Content-Disposition headers to enable the file to be both downloaded and opened

Is the server delivering an unexpected response?