Get Directions And Show Routes On Google Maps - GetDirectionsWithGoogleMaps.js

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.