Google Maps grey screen in bootstrap modal
<p>I have a function to show a google map:</p>

<pre><code>function initMapSA(lat, ln) {

    var myLatLng = { lat: lat, lng: ln };
    var opt = {
       center: myLatLng,
       zoom: 15,
       mapTypeId: google.maps.MapTypeId.ROADMAP,
       streetViewControl: false
    };

    map2 = new google.maps.Map(document.getElementById('map_canvas_agent'), opt);
    var markerSa = new google.maps.Marker({
         position: myLatLng,
         map: map2,
         title: 'Hello World!'
    });

}
</code></pre>

<p>In <code>#modal-body</code> I add <code>&lt;div id="map_canvas_agent"&gt;&lt;/div&gt;</code></p>

<p>I trigger it via a form button click event:</p>

<pre><code>$(".sa-location").click(function () {
     var id = $("#ServiceAgent").val(); //combobox value
     $.get("@Url.Action("GetServiceAgentLocation")", { id: id }, function (data) {
         initMapSA(data.Lat, data.Ln);//Initialize google maps
     }, "json");

});
</code></pre>

<p>The Goole Map is showing but it is just a grey screen rather than an actual map. How do I fix that?</p>