title: Google Map Route Arrow Line
body: <p>I currently have these codes to load GPX File into Google Maps</p>
  
  <pre><code>        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') . "');
  
  
          });
  </code></pre>
  
  <p>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.</p>