JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<div id="carousel-1" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-1" data-slide-to="1" ></li>
  </ol>

  <div class="carousel-inner">
      <div class="item active" style="height: 450px; width: 100%;">
          ABC
      </div>
      <div class="item">
          <div id="map-canvas" style="height: 450px; width: 100%;">
          </div>
      </div>
  </div>
    
    <!-- Carousel Controls -->
  <a class="left carousel-control" href="#carousel-1" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-1" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

JavaScript

$(document).ready(function(){
    var $canvas = $('#map-canvas');
    var dstLatLng = new google.maps.LatLng(37.403867, -121.975405);
    var orgLatLng = new google.maps.LatLng(37.4321365, -122.0988141);
    var directionsRenderer = new google.maps.DirectionsRenderer();
    var directionsService = new google.maps.DirectionsService();
    var request = {
			        origin: orgLatLng,
			        destination: dstLatLng,
			        travelMode: google.maps.TravelMode.DRIVING
			      };
    var mapOptions = {
			        zoom: 8,
			        center: dstLatLng,
			        mapTypeId: google.maps.MapTypeId.ROADMAP
			      };
    var map = new google.maps.Map($canvas[0], mapOptions);
    directionsRenderer.setMap(map);
    directionsService.route(request, function(result, status) {
        if (status === google.maps.DirectionsStatus.OK) {
          return directionsRenderer.setDirections(result);
        }
    });
    $('.carousel').carousel();
})