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

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

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

Continuously transmitting PNG files to a server. I intend to instruct the receiving browser to automatically refresh at set intervals

"Extracting information from the axios header and passing it to a Vue component: A step-by-step

What is the quickest way to redirect a URL in WordPress?

I'm puzzled by the error message stating that '<MODULE>' is declared locally but not exported

Why is the body the last element in Angular modules arrays?

What are some effective methods for incorporating large JSON data into a node.js script?

Overlap one element entirely with another

Neglecting the inclusion of a property when verifying for empty properties

Typing the url in the address bar when using Angular's ui-router

Tips for making a sidebar sticky when scrolling

How can I determine when a WebSocket connection is closed after a user exits the browser?

Perform a check on the state of the slideToggle using an if-else function and provide a report on the slideToggle state

Simple Way to Show API Output in Plain Text (Beginner Inquiry)

Populating a Listview in jqueryMobile with dynamic elements

I am unable to generate a vite application within WSL

Encountered an error while trying to download a PDF document in React

Determine the height of an element within an ng-repeat directive once the data has been fetched from an

Replicate the functionality of a backend API using AngularJS

Webpack fails to resolve paths provided by a JavaScript variable

Refresh the page and witness the magical transformation as the div's background-image stylish