JSFiddle - React, Tailwind, and code Playground

by Mukesh Yadav

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maps-api-ssl.google.com/maps/api/js?v=3&amp;sensor=false"></script>
<div class="col-sm-4">
  <button id="directionsButtonArtessa" type="button" class="btn btn-info btn-sm buttonCopyCommunity btn-community pull-right">SHOW DIRECTIONS</button>
</div>

<div class="container-fluid">
  <div id="googleMapLgModalArtessa" class="modal fade in show">
    <div class="modal-dialog modal-lg-size-artessa">
      <div class="modal-content">

        <div class="modal-header modal-lg-size-artessa clearfix">
          <p class="modal-title text-center bigTextCommunitySubhead">ARTESSA KIRKLAND
            <br>14111 74th Court NE, Kirkland WA 98034</p>

        </div>


        <div class="modal-body">
          <div class="row-fluid">
            <div class="col-sm-8">
              <div id="inputForm-artessa">
                <form id="mapInputs-artessa">
                  <div class="form-group">
                    <label class="sr-only" for="startAddressArtessa">Starting Address</label>
                    <input type="text" class="form-control input-lg smallTextMed" id="startAddressArtessa" placeholder="From: Enter Your Location">
                  </div>
                  <div class="form-group">
                    <label class="sr-only" for="endAddressArtessa">Ending Address</label>
                    <input type="text" class="form-control input-lg smallTextMed" id="endAddressArtessa" value="To: Artessa Kirkland&nbsp;&mdash;&nbsp;14111 74th Court NE Kirkland, WA 98034">
                  </div>
                </form>
              </div>
            </div>
           
          </div>
        </div>

        <div id="map-wrapper-artessa">
        </div>
        <div...

CSS

// ##### LARGE GOOGLE MAP MODAL ##### //
// ----------------------------------------------------------------------
#map-wrapper-artessa {
  width: 90rem;
  height: 45rem;
}

#directions-wrapper-artessa {
  // width:90rem;
  // height:45rem;
}

#googleMapLgModalArtessa {
  width: 90rem;
  height: auto;
  padding: 0;
  margin: 0 auto;
}

#googleMapLgModalArtessa .modal-dialog {
  width: 90rem;
  height: auto;
  padding: 0;
  margin: 0 auto;
  background-color: @brand-white;
}

#googleMapLgModalArtessa,
#googleMapLgModalArtessa .modal-header,
#googleMapLgModalArtessa .modal-content,
#googleMapLgModalArtessa .modal-footer {
  border: 0 none;
  border-radius: 0;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  background-color: @brand-white;
}

#googleMapLgModalArtessa .modal-footer {
  height: 7rem;
}

.closeBtn-bottom,
.closeBtn-top {
  padding: 0;
  margin: auto 3rem auto 0;
}

.closeBtn-top {
  margin-top: 1rem;
}

JavaScript

var map;
var thisLatLng;

function calcRouteArtessa() {
  var start = document.getElementById("startAddressArtessa").value;
  var end = "14111 74th Court NE, Kirkland, WA 98034";
  // var end = document.getElementById("endAddressArtessa").value;

  var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
	var directionsService = new google.maps.DirectionsService({map:map});
  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
    } else {
      alert("Directions were not successful because the starting location was " + status);
    } // end IF
  }); // fnd Function

}


// Static Google Map - Artessa
// ....................................................................................................................................



function CenterControl(controlDiv, map) {

  // Set CSS for the control border.
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = '#fff';
  controlUI.style.border = '2px solid #fff';
  controlUI.style.borderRadius = 0;
  controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlUI.style.cursor = 'pointer';
  controlUI.style.marginBottom = '12px';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'VIEW LARGER MAP';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior.
  var controlText = document.createElement('div');
  controlText.style.color = 'rgba(0, 98, 101, 1)'; //'hsla(182, 100%, 20%, 1)';      //'rgb(25,25,25)';
  controlText.style.fontFamily = 'Helvetica,Arial,sans-serif';
  controlText.style.fontSize = '14px';
  controlText.style.fontWeight = 'bold';
  controlText.style.lineHeight = '24px'; //38px';
  controlText.style.paddingLeft = '5px';
  controlText.style.paddingRight = '5px';
  controlText.innerHTML = 'VIEW LARGER MAP';
  controlUI.appendChild(controlText);

  // Setup the...