I'm still fairly new to working with Javascript and the Google Maps API. I've come across various solutions to a similar issue that I'm facing, but none of them seem to work for my specific code. I'm starting to question whether the polyline should be redefined each time the function is called, effectively replacing the previous one. Am I missing something here? What steps can I take to remove the "old" polyline when the marker is dragged?
If you'd like to take a look at my code, you can find it here: https://jsfiddle.net/emvee/qqavw3gh/6/
The key lines of code to focus on are 44-53 (which handle events when the marker is being dragged) and lines 171-215 (where the function defining and drawing the polyline based on directions from directionsService is located).
//map details, i.e. creates a map of Lucca
var mapOptions = {
center: new google.maps.LatLng(43.8430, 10.5050),
zoom: 15,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
//create map
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
//marker details and creation omitted for brevity
function calcRoute() {
//Routing logic implementation inside this function...
}
calcRoute();