Our app takes advantage of a JSON file containing the different bus lines and arrays of geographic points, the combination of which forms the route of the busses. A part of the array with coordinate points looks like this:

Following that, in the same event listener, we set up a variable cointaining only the lines/geographic points of the clicked bus number.

1

2

3

4

5

6

7

varself=$(this);

routeLines=routes.filter(function(route){

returnroute.properties.line_name===self.attr("data-line")

})[0];

Following that, we format the coordinates that we have in the routeLines variable and create a new array with objects that have only the lat and lng properties that we would need to pass to the Google Maps API.

1

2

3

4

5

6

7

8

9

10

11

12

13

varlineCoords=[];

for(varj=0;j<routeLines.geometry.coordinates.length;j++){

lineCoords.push({

lat:routeLines.geometry.coordinates[j][1],

lng:routeLines.geometry.coordinates[j][0]

})

}

Now, for the cool stuff. We add and connect all those single points using the google.maps.Polyline method , passing it the array of lat/lng objects in a path property and we define a few properties which set the route to have green-ish color, to be fully opaque and give it an easily visible stroke weight.

1

2

3

4

5

6

7

8

9

10

11

12

13

varlinePath=newgoogle.maps.Polyline({

path:lineCoords,

geodesic:true,

strokeColor:'#99ff00',

strokeOpacity:1.0,

strokeWeight:4

});

And, voila. We have shown the user the full path from point A to point B.

Or have we? It seems like we have to add the path/route to the map before we can see it, so we type linePath.setMap(map); and we add the path/route to our array so that we can remove the path from the map later when the user wants to see the route for another bus.

How to go further?

You can try to make your Google Maps API-reliant app into a mobile app with Phonegap/Cordova. If you do this, you would not have to worry about users in some browsers having to give permission every few seconds as they will be asked only once and the users will have your app in their pocket!

Ivan is a student of IT, a freelance web designer/developer and a tech writer. He deals with both front-end and back-end stuff. Whenever he is not in front of an Internet-enabled device he is probably reading a book or traveling. You can find more about him at: http://www.dimoff.biz. facebook, twitter