Advance Route Planner API Ver 7 0

Description

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 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