Get Directions And Show Routes On Google Maps - GetDirectionsWithGoogleMaps.js
File Size: | 6.16 KB |
---|---|
Views Total: | 3162 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A jQuery plugin that gets the driving/walking/bicycling/transit directions between any points and displays the routes on a Google Map.
Based on the Google Direction API.
How to use it:
1. Load the Google Maps JavaScript API in the document.
<script src="https://maps.googleapis.com/maps/api/js?key={Your API Key Here}"></script>
2. Load both jQuery library and the GetDirectionsWithGoogleMaps.js script at the end of the document.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="GetDirectionsWithGoogleMaps.js"></script>
3. Create the HTML for the app.
<div id="FindMeOnGoogleMap"> <h3>I want to get there by</h3> <select name="select"> <option value="BICYCLING">Bicycling</option> <option value="DRIVING" selected>Driving</option> <option value="TRANSIT">Transit</option> <option value="WALKING">Walking</option> </select> <h3>Find The Location</h3> <input type="text" name="FindMeOnGoogleMapStart" id="FindMeOnGoogleMapStart" placeholder="Enter Address, Postal Code, City, etc." onclick="document.getElementById(this.id).value= '';"> <button class="calculate">Submit</button> <button class="reset">Reset</button> <!-- Google Map--> <div id="map"></div> </div>
4. Initialize the plugin and specify where you want to calculate the direction.
$("#FindMeOnGoogleMap").GetDirectionsWithGoogleMaps({ name: 'Awesome Store', description: 'A place where you can buy awesome stuff for your awesome lifestyle', latitude: 48.424050, longitude: -123.357708 });
5. Specify the Google Maps type. Default: 'ROADMAP'.
$("#FindMeOnGoogleMap").GetDirectionsWithGoogleMaps({ name: 'Awesome Store', description: 'A place where you can buy awesome stuff for your awesome lifestyle', latitude: 48.424050, longitude: -123.357708, type: 'ROADMAP' });
6. Specify the zoom level. Default: '13'.
$("#FindMeOnGoogleMap").GetDirectionsWithGoogleMaps({ name: 'Awesome Store', description: 'A place where you can buy awesome stuff for your awesome lifestyle', latitude: 48.424050, longitude: -123.357708, zoom: 10 });
This awesome jQuery plugin is developed by michabre. For more Advanced Usages, please check the demo page or visit the official website.