Google Map Route Arrow Line -

Google Map Route Arrow Line -

i have these codes load gpx file google maps

function loadgpxfileintogooglemap(map, filename) { $.ajax({url: filename, datatype: 'xml', success: function(data) { var parser = new gpxparser(data, map); parser.settrackcolour('#ff0000'); // set track line colour parser.settrackwidth(5); // set track line width parser.setmintrackpointdelta(0.001); // set minimum distance between track points parser.centerandzoom(data); parser.addtrackpointstomap(); // add together trackpoints parser.addwaypointstomap(); // add together 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 want replace arrow lines instead of straight line. possible? if yes, please help me it.

in order add together arrows polylines created gpxparser, need modify library give access polylines, see 2 lines , function added library below. polylines , add together arrows them below.

working illustration (based off illustration in gpxviewer documentation referenced above)

changes code example in documentation:

function loadgpxfileintogooglemap(map, filename) { $.ajax({url: filename, datatype: "xml", success: function(data) { var parser = new gpxparser(data, map); parser.settrackcolour("#ff0000"); // set track line colour parser.settrackwidth(5); // set track line width parser.setmintrackpointdelta(0.001); // set minimum distance between track points parser.centerandzoom(data); parser.addtrackpointstomap(); // add together trackpoints // ******************** added ******************************* var polylines = parser.getpolylines(); // documentation on pre-defined symbols , repeated symbols: // https://developers.google.com/maps/documentation/javascript/symbols // define symbol using predefined path (an arrow) // supplied google maps javascript api. var linesymbol = { path: google.maps.symbolpath.forward_open_arrow, strokecolor: '#00ff00', strokeopacity: 1.0 }; (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 together waypoints } }); }

changes loadgpx.js library:

function gpxparser(xmldoc, map) { this.xmldoc = xmldoc; this.map = map; this.trackcolour = "#ff00ff"; // reddish this.trackwidth = 5; this.mintrackpointdelta = 0.0001 this.polylines = []; // **added** } // homecoming reference array of polylines **added function** gpxparser.prototype.getpolylines = function() { homecoming 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 = 1; < trackpoints.length; i++) { var lon = parsefloat(trackpoints[i].getattribute("lon")); var lat = parsefloat(trackpoints[i].getattribute("lat")); // verify far plenty away lastly point 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 }

google-maps google-maps-api-3 gpx