Skip to content
Gets Google Map directions from one address to another. Having a map on the page is totally optional.
JavaScript HTML CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
README.md
index.html
jqDirect.js
jqDirect.min.js
style.css

README.md

jqDirect()

jqDirect is a minimalistic plugin for jQuery that gets Google Map directions from one address to another. Having a map on the page is totally optional & directions are printable with a built in method. Take a look at index.html for examples or check out the demo.

Usage

Load jQuery (1.9.1+), Google Maps v3, and jqDirect:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="jqDirect.min.js"></script>

Create a map with an initial marker:

<div id="map-canvas"></div>
var $map = $('#map-canvas');
$map.jqDirect({
  to: 'Raleigh, NC'
});

Get directions from one address to another: This example could be triggered on some event... like a form submit():

// somewhere on the page you have this: <div id="directions-output"></div>
var $output = $('#directions-output');

// Use $({}) if you don't have/want a map
$map.jqDirect('calcRoute', {
  'from': 'Boston, MA', 

  // You can specify a different 'to' address here (* by default it uses the one you set above )
  // 'to': 'New York, NY',

  // Where should the list of directions output?
  'output': $output
});

Print the outputted directions:

// A link to trigger printing
var $print = $('#print');

// It's important to first remove the event because some Browsers trigger `print()` more than once
$print.off('click.jqdirect');
$print.on('click.jqdirect', function (e) {
  e.preventDefault();

  // If output has the directions
  if ($output.children().length) {
    $map.jqDirect('print'); // call jqDirect's built in method
  }
});

Add additional markers to the map if needed:

// Both are equivalent
$map.jqDirect("addMarker", 'Boston, MA');
$map.data('jqdirect').addMarker('Raleigh, NC');

Known Issues

  1. When printing directions, the map may fall in between 2 pages, therefore showing cut off.
  2. On the printed directions, the map is positioned incorrectly.
  3. On the printed map, the route line (blue line) does not appear.
Something went wrong with that request. Please try again.