We've done well up to this point on our own. We can tell which theater is closest and how far it is as the crow flies. Sadly though, despite all its promise, the 21st century has not led to us all having private jet packs. Therefore, it is probably best that we not display that distance. Most likely, they're going to drive, ride a bus, bike, or walk.
Let's leverage the Google Maps API (https://developers.google.com/maps/documentation/javascript/). If your site is going to have a lot of API hits, you might have to pay for the business pricing. For us, while we are in development, there's no need.
Here's a look at what we're about to build.
First we'll need another page to show a map and directions, as well as the script that will actually load the maps from Google Maps API. Let's use the following code:
<div id="directions" data-role="page">
<div data-role="header">
<h3>Directions</h3>
</div>
<div data...