How to draw colored transit bus route line on google map with angularjs directives?

ionic-v1
1

Hi,

I want to draw out a colored route line for a bus’s route by using the AngularJS directives google maps API (angularjs-google-maps directives). I get the following detailed XML data from the transit organization that is specific to a particular bus route. How do I use this to show the route in color on the map? Do you use polylines or waypoints? And how do I get the route to show without it having vertices – it should be smooth. I will figure out how to parse the XML data. Any help would be greatly appreciated.

here is a sample XML “route patterns response” (as the transit org calls it) from the transit API.

<?xml version=”1.0”?>
<bustime-response>
    <ptr>
        <pid>954</pid>
        <ln>35569</ln>
        <rtdir>East Bound</rtdir>
        <pt>
            <seq>1</seq>
            <typ>S</typ>
            <stpid>409</stpid>
            <stpnm>Madison & Pulaski</stpnm>
            <lat>41.880641167057</lat>
            <lon>-87.725835442543</lon>
            <pdist>0.0</pdist>
        </pt>
        <pt>
            <seq>2</seq>
            <typ>W</typ>
            <lat>41.880693089146</lat>
            <lon>-87.725765705109</lon>
        </pt>
        <pt>
            <seq>3</seq>
            <typ>W</typ>
             <lat>41.880693089146</lat>
            <lon>-87.725674510002</lon>
            <pdist>97.0</pdist>
        </pt>
....(and so on)
   </ptr>
</bustime-response>

link to the transit org’s truetime API documentation:

Thank you for your help.indent preformatted text by 4 spaces