June 21, 2016 11:33 am

Making the most of the Google Maps API – Marking a path to a location

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:

Making the most of the Google Maps API – Adding a map

"coordinates": [

[

26.00671399999988,

43.8541

],

[

26.006582999999882,

43.85418

],

[

26.00640999999988,

43.85422

],

[

26.006300999999883,

43.85422

],

Now, if we take all those points and fill the distance between them we would get a visual representation of the vehicles’ route on the map. Thankfully, Google Maps allows us to do just that.

The fetchRoutes method that we have seen in the initialization function just stores the routes in a variable for us to use later on.

Transporter.fetchRoutes = function () {

$.get("js/routes.json", function (data) {

routes = data.features;

})

}

When a user clicks on a bus number, we want to show him/her the route of the bus from its initial departure to its endpoint on the map.  We set up an event listener that would be set for all elements with the class of bus-num no matter if they existed when we were setting up the event listener thanks to jQuery’s event delegation (http://stackoverflow.com/questions/8459204/adding-event-listeners-to-current-and-future-elements-with-a-particular-class). Thereafter, we remove from the map any previous routes that could have been shown to the user due to his/her previous clicks.

$("body").on("click", ".bus-num", function () {

for (var x = 0; x < Transporter.globals.linePaths.length; x++) {

Transporter.globals.linePaths[x].setMap(null);

}

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

var self = $(this);

routeLines = routes.filter(function (route) {

return route.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.

var lineCoords = [];

for (var j = 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.

  var linePath = new google.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.

You can take a look at the app with some other features at: http://demo.phpgang.com/google-maps-api/

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!

Author Ivan Dimov

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


Tutorial Categories:

Leave a Reply

Your email address will not be published. Required fields are marked *