A) Details – top
Advance Route Planner is a A to B RoutePlanner tool written in Pure Javascript with Google Map Ver. 3 API. it have very advance features like :
1) Added Weather layer on Google Map with OpenWeather APi
2) Added Transit Calculator
3) Added Place Search in all location textboxes.
4) Fixed Bugs.
5) Fuel Calculator.
6) Sorting of Locations.
7) Added Help Section.
Distance Unit Selection Added.
9) Optimized CSS, JS to minimize page load.
10) Traffic Layer Added.
11) Search Box for Nearby Location.
12) Auto Location Detection.
13) Added Google Nearby Places.
14) Now you can add multiple Waypoints
15) Get Shortest Route from Multiple Waypoints
16) Get Trip / Tour Cost by Cost Calculator
17) Convert KM to Miles easily
18) Responsiveness.
19) Google Adsense.
20) Drag-able Route, adjust route as per your requirement.
21) Share able Link Generator.
22) Print button.
23) Change Google Map Language.
24) Fix your starting / ending point with ease and get proper Route Directions in details via Google API.
This tool can be easily attached to any existing Projects.
if you have any query you can contact us any time at my profile page or raise ticket.
How to Use – top
Extract all the files form the zip. The file you need to include Google API Javascript along with routeplannerapi.js.
If you wanted to install the plugin in your website please follow below after setting up above settings
include below libraries
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=adsense"></script> <script src="js/routeplannerapi.min.js"></script>
Set up Form, to get Starting and Ending Location and call calcRoute(); function on button submit as below :
<form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="start">Starting Location :</label> <input type="text" class="form-control" id="start" placeholder="Enter Starting Location"> </div> <div class="form-group"> <label class="sr-only" for="end">Destination Location :</label> <input type="text" class="form-control" id="end" placeholder="Enter Destination Location"> </div> <div class="form-group"> <select class="form-control" id="mode" name="mode"> <option value="DRIVING">Driving</option> <option value="WALKING">Walking</option> <option value="BICYCLING">Bicycling</option> <option value="TRANSIT">Transit</option> </select> </div> <button type="button" class="btn btn-success" onClick="calcRoute();">Get Route</button> </form>
Add Google Map Div and Google Direction Div in the Page as below
<div id="map-canvas" /> <div id="directionsPanel" />
Thats it ! you are good to go if you want to do any changes please follow below instructions :
var _ZNRPL = { latitude : 41.850033, longitude : -87.6500523, start:"", end:"", adsense:true, publisherid:"ca-google-maps_apidocs", adformat : "BANNER", adposition : "RIGHT_BOTTOM", adbackgroundColor: '#c4d4f3', adborderColor: '#e5ecf9', adtitleColor: '#0000cc', adtextColor: '#000000', adurlColor: '#009900' };
You can set the variables, as per your requirement like below :
You can set your center location when page load by providing latitude and longitude of your location.
latitude : 41.850033, longitude : -87.6500523,
You can setup your starting or ending location as below
start:"Chicago", end : "New York",
You can enable or disable Google Adsense as below
adsense:true,
If adsense is enable you have to set your publisher id as below
publisherid:"ca-google-maps_apidocs",
If adsense is enable you have to set Type of Banner Format as below
adformat : "BANNER",
As per Google Adsense, Banner Format can be :
LEADERBOARD
creates a fully horizontal display area.BANNER
creates a horizontal “banner” ad.HALF_BANNER
creates a smaller horizontal “banner” ad.SKYSCRAPER
creates a large vertical ad.WIDE_SKYSCRAPER
creates a wide vertical ad using larger
type.VERTICAL_BANNER
creates a medium-sized vertical ad.BUTTON
creates a small ad.SMALL_SQUARE
creates a slightly larger square ad.SQUARE
creates a large square ad with large type.SMALL_RECTANGLE
creates a small rectangular ad.MEDIUM_RECTANGLE
creates a medium rectangular ad.LARGE_RECTANGLE
creates a large rectangular ad.SMALL_VERTICAL_LINK_UNIT
creates a small vertical link
unit.MEDIUM_VERTICAL_LINK_UNIT
creates a medium vertical link
unit.LARGE_VERTICAL_LINK_UNIT
creates a large vertical link
unit.X_LARGE_VERTICAL_LINK_UNIT
creates an extra large vertical
link unit.SMALL_HORIZONTAL_LINK_UNIT
creates a small horizontal link
unit.LARGE_HORIZONTAL_LINK_UNIT
creates a large horizontal link
unit.
If adsense is enable you have to set Position of Banner as below
adposition : "RIGHT_BOTTOM",
As per Google Adsense, Banner Position can be :
TOP_CENTER
indicates that the adunit should be placed
along the top center of the map.TOP_LEFT
indicates that the adunit should be placed along
the top left of the map, with any sub-elements of the control “flowing”
towards the top center.TOP_RIGHT
indicates that the adunit should be placed along
the top right of the map, with any sub-elements of the control “flowing”
towards the top center.LEFT_TOP
indicates that the adunit should be placed along
the top left of the map, but below anyTOP_LEFT
elements.RIGHT_TOP
indicates that the adunit should be placed along
the top right of the map, but below anyTOP_RIGHT
elements.LEFT_CENTER
indicates that the adunit should be placed
along the left side of the map, centered between theTOP_LEFT
andBOTTOM_LEFT
positions.RIGHT_CENTER
indicates that the adunit should be placed
along the right side of the map, centered between the
TOP_RIGHT
andBOTTOM_RIGHT
positions.LEFT_BOTTOM
indicates that the adunit should be placed
along the bottom left of the map, but above anyBOTTOM_LEFT
elements.RIGHT_BOTTOM
indicates that the adunit should be placed
along the bottom right of the map, but above anyBOTTOM_RIGHT
elements.BOTTOM_CENTER
indicates that the adunit should be placed
along the bottom center of the map.BOTTOM_LEFT
indicates that the adunit should be placed
along the bottom left of the map, with any sub-elements of the control
“flowing” towards the bottom center.BOTTOM_RIGHT
indicates that the adunit should be placed
along the bottom right of the map, with any sub-elements of the control
“flowing” towards the bottom center.
If adsense is enable you have to set Colors Scheme of Banner as below in hex format
adbackgroundColor: '#c4d4f3', adborderColor: '#e5ecf9', adtitleColor: '#0000cc', adtextColor: '#000000', adurlColor: '#009900'
Kindly Note: We update new contents like WordPress Themes, Plugins, PHP Scripts everyday. But remember that you should never use this items in a commercial website. All the contents posted here for development & testing purpose only. We’re not responsible for any damage, use at your own RISK! We highly recommend to buy Advance Route Planner API Ver 7.0 from the The Developer ( zincksoft ) website. Thank you.
Download = Advance Route Planner API Ver 7.0-[Updated].zip