Google Map Route Arrow Line - google-maps

Question

I currently have these codes to load GPX File into Google Maps
function loadGPXFileIntoGoogleMap(map, filename) {
$.ajax({url: filename,
dataType: 'xml',
success: function(data) {
var parser = new GPXParser(data, map);
parser.setTrackColour('#ff0000'); // Set the track line colour
parser.setTrackWidth(5); // Set the track line width
parser.setMinTrackPointDelta(0.001); // Set the minimum distance between track points
parser.centerAndZoom(data);
parser.addTrackpointsToMap(); // Add the trackpoints
parser.addWaypointsToMap(); // Add the waypoints
}
});
}
$(document).ready(function() {
var mapOptions = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
loadGPXFileIntoGoogleMap(map, '" . base_url('gps/ajax/request/trace') . "');
});
Everything is good but I want to replace it with arrow lines instead of straight line. Is it possible? If yes, please help me to do it.

Answer 1

In order to add arrows to the polylines created by the GPXParser, you need to modify that library to give access to the polylines, see the two lines and the function added to that library below. Then get the polylines and add the arrows to them as below.
working example (based off the example in the gpxviewer documentation referenced above)
Changes to the code from the example in the documentation:
function loadGPXFileIntoGoogleMap(map, filename) {
$.ajax({url: filename,
dataType: "xml",
success: function(data) {
var parser = new GPXParser(data, map);
parser.setTrackColour("#ff0000"); // Set the track line colour
parser.setTrackWidth(5); // Set the track line width
parser.setMinTrackPointDelta(0.001); // Set the minimum distance between track points
parser.centerAndZoom(data);
parser.addTrackpointsToMap(); // Add the trackpoints
// ******************** added *******************************
var polylines = parser.getPolylines();
// documentation on pre-defined symbols and repeated symbols:
// https://developers.google.com/maps/documentation/javascript/symbols
// Define a symbol using a predefined path (an arrow)
// supplied by the Google Maps JavaScript API.
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
strokeColor: '#00FF00',
strokeOpacity: 1.0
};
for (var i=0; i<polylines.length; i++) {
polylines[i].setOptions({
icons: [{
icon: {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
strokeColor:'#0000ff',
fillColor:'#0000ff',
fillOpacity:1,
scale: 3
},
repeat:'100px'
}]
});
}
// *****************************end added**********************
parser.addWaypointsToMap(); // Add the waypoints
}
});
}
Changes to the loadgpx.js library:
function GPXParser(xmlDoc, map) {
this.xmlDoc = xmlDoc;
this.map = map;
this.trackcolour = "#ff00ff"; // red
this.trackwidth = 5;
this.mintrackpointdelta = 0.0001
this.polylines = []; // **added**
}
// return a reference to the array of polylines **added function**
GPXParser.prototype.getPolylines = function() {
return this.polylines;
}
GPXParser.prototype.addTrackSegmentToMap = function(trackSegment, colour,
width) {
var trackpoints = trackSegment.getElementsByTagName("trkpt");
if(trackpoints.length == 0) {
return;
}
var pointarray = [];
// process first point
var lastlon = parseFloat(trackpoints[0].getAttribute("lon"));
var lastlat = parseFloat(trackpoints[0].getAttribute("lat"));
var latlng = new google.maps.LatLng(lastlat,lastlon);
pointarray.push(latlng);
for(var i = 1; i < trackpoints.length; i++) {
var lon = parseFloat(trackpoints[i].getAttribute("lon"));
var lat = parseFloat(trackpoints[i].getAttribute("lat"));
// Verify that this is far enough away from the last point to be used.
var latdiff = lat - lastlat;
var londiff = lon - lastlon;
if(Math.sqrt(latdiff*latdiff + londiff*londiff)
> this.mintrackpointdelta) {
lastlon = lon;
lastlat = lat;
latlng = new google.maps.LatLng(lat,lon);
pointarray.push(latlng);
}
}
var polyline = new google.maps.Polyline({
path: pointarray,
strokeColor: colour,
strokeWeight: width,
map: this.map
});
this.polylines.push(polyline); // **added
}