mustafababil / Taxi-Fare-on-Map

Taxi Fare estimation on Google Maps in Copenhagen and Roskilde Districts in Denmark

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Taxi-Fare-on-Map

Taxi Fare estimation on Google Maps in Copenhagen and Roskilde Districts in Denmark

It basically allows users to select their departure and arrival points on the interactive map, then in return the system informs the user about the departure and arrival addresses, the distance between them and the approximate price via taxi.

The application is also capable of showing alternative routes between the places. People can see 3 alternative routes at all and compare the prices to the another.

The Background

The single web page mainly integrates 2 APIs together. First one is Google Maps JavaScript API v3 and the second one is GeoService of OIORest. I also benefit from jQuery to handle button actions easily.

The basic idea is that Google Maps API draws the map, user selects the points, GeoService returns the addresses according to the coordinates of points, Google Maps API calculates the distance and the price is calculated according to the distance by the application itself.

In more detailed view;

  • initmap() function, the options of the map is setted and map is initialized on the page.

  • initialize() function, a listener is added to the map. This listener calls a function that adds a marker on the map.

  • createMarker() function creates first and second marker as departure and arrival markers. After it creates the marker, it adds a listener on each marker called dragendEvent().

  • dragendEvent() function is called whenever the position of a marker is changed. This function triggers redraw() function to make calculations again.

  • redraw() function calls findRoute() function with positions of first and second markers as a parameter.

  • findRoute() function takes the two marker as a parameter and draws the route between them on the map. After it draws the route, it calls dirOnHead() to reflect the results according to this route.

  • dirOnHead() prints the addresses of departure and arrival points, the distance between them and the approximate price with taxi on the web page. To find distance, it uses the property of the route variable in Google Maps API. To find the exact addresses of the places on the map, it sends a JSON request to GeoService of OIORest with the coordinations of them. To interpret returning JSON file in a user friendly way, it calls findDepartAddr() and findArriveAddr().

  • findDepartAddr() and findArriveAddr() reads the JSON file and convert it to a readable text format.

  • alterit() is triggered when the “Alternative Route” button is pressed. It draws the new route and calls dirOnHead() to calculate the new results.

Demo

http://mustafababil.com/projects/taxifare/

Screenshot

Taxi-fare-finder

About

Taxi Fare estimation on Google Maps in Copenhagen and Roskilde Districts in Denmark


Languages

Language:JavaScript 68.3%Language:HTML 31.7%