JSFiddle - React, Tailwind, and code Playground

by Ratan Paul

HTML

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDA-EZF60n9DJ8SRhR2GnkXNESI0lOvU48&amp;language=en-GB"></script>
<script src="http://atomicstructure.net/jquery.printThis.js"></script>
<button id="btn-directions" data-toggle="modal" data-target=".directions-modal">Get Directions</button>

<div id="printSection" class="modal fade directions-modal" tabindex="-1" role="dialog" aria-labelledby="modal_b4_directions" aria-hidden="true">
  	<div class="modal-dialog modal-lg">
  	  	<div class="modal-content">
  	  	  	<div id="directions-modal-map" style="height:400px;"></div>

			<div id="container-fluid">
				<div class="row bg-light-grey text-center">
					<h2 class="mb20">Directions</h2>
				</div>

				<div class="row">
					<div class="col-xs-8 col-xs-offset-2">
							<div class="panel panel-danger mb0 mt20 hidden text-center" id="directions-error">
								<div class="panel-heading">
									<h3 class="panel-title">We're sorry, but something went wrong.</h3>
								</div>
								<div class="panel-body">
									Google Maps could not find the place you searched for.
								</div>
							</div>
					</div>
				</div>

				<div class="row text-center non-printable" id="directions-form">
					<div class="col-xs-6 col-xs-offset-3">
						<form role="form">
							<div class="form-group has-feedback" id="container-direction-form">

							<button class="btn btn-lg btn-primary col-full mt20" id="get_directions">Get Directions</button>
							<button class="btn btn-lg button-okay col-full mt20 hidden" id="print_directions"><span class="glyphicon glyphicon-print"></span> Print Map</button>
						</form>
					</div>
				</div>

				<div class="row">
					<div...

JavaScript

$(document).ready(function() {
    // Triggers when the modal/popup is launched
    $('.directions-modal').on('show.bs.modal', directions_popup);
    
    // Triggers when the "Get Directions" buttin is pressed in the modal
    $('#get_directions').on('click', function(e) {
		e.preventDefault();
		initialise_directions("directions-modal-map");
		calcRoute();
	});
    
    // printThis functionality
    $('#print_directions').on('click', function(ev) {
		ev.preventDefault();

		$('#printSection').printThis(
			{
				debug: false,
				importCSS:true,
				printContainer: false,
				pageTitle: "Getting here",
				printDelay: 333,
				header: null,
			});
	});
});

// Setting up some vars
var map;
var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();

/***
 * Here we're just creating the map, and resizing it
 *    as it's in a popup
 */
function directions_popup() {
  var mapOptions = {
    zoom: 7,
    center: new google.maps.LatLng(42.547181, -73.048588)
  };
  map = new google.maps.Map(document.getElementById('directions-modal-map'),
      mapOptions);
    
  setTimeout( function() {
      google.maps.event.trigger(map, "resize");
  }, 400);
}

// Loads the direction steps
function initialise_directions(map_element) {
  	directionsDisplay.setMap(map);
  	$('#directions-panel').empty();
  	directionsDisplay.setPanel(document.getElementById('directions-panel'));
}

function calcRoute() {
	var request = {
	    origin:"New York",
	    destination:"Boston",
	    travelMode: google.maps.TravelMode.DRIVING,
	    unitSystem: google.maps.UnitSystem.IMPERIAL
	};
	directionsService.route(request, function(response, status) {
	  	if (status == google.maps.DirectionsStatus.OK) {
            $('#print_directions').fadeIn().removeClass('hidden');
	  	  	directionsDisplay.setDirections(response);
	  	}
	});
}