JSFiddle - React, Tailwind, and code Playground

HTML

<button id="show">Show</button>
<div id="a">
  <div id="map_wrapper" style="display:none">
    <div id="map_canvas" style="height: 354px; width:713px;"></div>
  </div>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script>
  <script>
    var directionsService,
    directionsDisplay,
    map,
    bounds;



    function initialize() {

      directionsService = new google.maps.DirectionsService();
      directionsDisplay = new google.maps.DirectionsRenderer();

      var mapOptions = {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true
      }

      map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
      directionsDisplay.setMap(map);


      var start = 'New York, NY'
      var end = 'Chicago, IL';
      var request = {
        origin: start,
        destination: end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
      };
      directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          directionsDisplay.setDirections(response);
          bounds = response.routes[0].bounds;
        }
      });
    }
  </script>
</div>

JavaScript

$(document).ready(function (e) {
  $('#show').on('click', function () {
    $('#map_wrapper').show(0, function () {
      // this will fire once the map resize is complete
      google.maps.event.addListenerOnce(map, 'idle', function () {
        this.fitBounds(bounds);
      });
      google.maps.event.trigger(map, "resize");
    });
  });
});