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 Responsiveness, Google Adsense, Dragable Route, Shareable Link Genrator, Print button, Change Google Map Language, 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 any TOP_LEFT elements.RIGHT_TOP indicates that the adunit should be placed along
the top right of the map, but below any TOP_RIGHT
elements.LEFT_CENTER indicates that the adunit should be placed
along the left side of the map, centered between the TOP_LEFT
and BOTTOM_LEFT positions.RIGHT_CENTER indicates that the adunit should be placed
along the right side of the map, centered between the
TOP_RIGHT and BOTTOM_RIGHT positions.LEFT_BOTTOM indicates that the adunit should be placed
along the bottom left of the map, but above any BOTTOM_LEFT
elements.RIGHT_BOTTOM indicates that the adunit should be placed
along the bottom right of the map, but above any BOTTOM_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'
Download Advance Route Planner API Ver 1.0 (Miscellaneous)
