Google Map Path Optimization

By : NajmulIqbal15 Published on Thursday, November 24, 2016,18:54:19 in Royalty Free Javascript

Demo

9 $

Google Map Path Optimization is a JavaScript code that optimizes path for multiple locations. This code is useful if you are new to a city and you want to visit multiple locations. As you are new to the city and you don’t know where to visit first, second and so on. You will need to enter all the locations where you want to visit and will specify your start/end (source/destination) locations. By clicking the Display button, all the locations will be displayed on the map with proper order so that to minimize your travel time. Please watch the video preview before checking the live demo.
Click here to view video preview. Click here if you need Code Generators for PHP, C#, VB.Net and Entity Framework.

Features:

It optimizes path for multiple locations.

It uses the Google Maps Directions API to display directions on the map.

It adds marker on the map on click and uses GeoCoder to get address of that location.

It uses google maps autocomplete for searching a location.

It utilizes the places library.

It supports various travel modes (Driving, Walking and Bicycling).

You can display directions with or without optimization as required.

It uses the bootstrap UI.

How To Use?

Add Locations:
Enter a location in the Location box.
Click the Add button.
The specified location will be added to both Source and Destination drop down lists.
You can also click on the map on your desired location to get address of that location. The address will be displayed in the Location text box.
Add all the locations you want to visit.
Select Source Location: Select a location from the Source drop down list from where you want to start the visit.
Select Destination Location: Select a location from the Destination drop down list that you want to visit in the end (your final destination address). Check Same as Source check box if you want to come back to the Source address.
Specify Your Travel Mode: Select your desired travel mode from the Travel Mode drop down list.
Path Optimization: Check Optimize Path check box if you want to optimize the path. If you want to visit multiple locations and you don’t know where to visit first, second and so on then check this option to display the directions in the proper order so that to minimize your travel time.
Display Directions: Click the Display button to display the directions. Click the Directions Description tab to view all the steps with distance and duration.
Clearing Locations: If you want to clear all locations then click the Clear button and click OK from the confirmation dialog. The form will also be reset.