JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=geometry&amp;sensor=false&quot;"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<a class="openmodal" href="#contact"  data-toggle="modal" data-id="Peggy Guggenheim Collection - Venice">Contact</a>
      <div class="modal fade" id="contact" role="dialog" >
            <div class="modal-dialog modal-lg">
                <div class="modal-content" id="back" >  
                    <div class="modal-header">
                    <h4>Contact<h4>
                </div>
                <div class="modal-body">    
                    <div id="map"></div>
                </div>
                <div class="modal-footer">
                    <a class="btn btn-default" data-dismiss="modal">Close</a>
                </div>      
            </div>
      </div>

CSS

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map{
  height: 300px;
  width: 600px;  
}

JavaScript

var map;

google.maps.event.addDomListener(window, 'load', initialize);

function initialize() {
   var mapCanvas = document.getElementById('map');
   var mapOptions = {
      center: new google.maps.LatLng(44.5403, -78.5463),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
   }
   map = new google.maps.Map(mapCanvas, mapOptions)
}

$('#contact').on('shown.bs.modal', function () {
    google.maps.event.trigger(map, "resize");
});