JSFiddle - React, Tailwind, and code Playground

The example demonstrates how to display Google Maps in bootstrap Modal

by Vadim Gremyachev

HTML

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//maps.googleapis.com/maps/api/js"></script>
<a class="btn btn-default" data-toggle="modal" data-target="#myModal">Map</a>


<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div id="gmap_basic"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

CSS

#gmap_basic {
    height: 300px;
    width: 100%;
}

JavaScript

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

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

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