Can't get OpenLayers 3 map to display in Bootstrap modal

javascript, jquery, openlayers-3, twitter-bootstrap-3

Solution

I had the same problem. You need to force the map to load after the modal has been open. Try having a function that inits the map:

function loadMap () {
    var map = new ol.Map({
        controls: ol.control.defaults({
            attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                collapsible: false
            })
        }).extend([mousePositionControl]),
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        target: 'map',
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        })
    });
}

And shown.bs.modal is the event trigered once the modal is opened

<script>
    $('#GazModal').on('shown.bs.modal', function () {
        loadMap();
     })
</script>

Problem

It looks like there is a weird bug when trying to display an ol3 map within a modal. The map is in the modal but it doesn't display. Resizing the window manually forces it display however. Here's a link to try and see what I mean. Click on the settings pulldown within each map. Click on 'Get Feature Info'. This will toggle the modal with a map in it (but not displaying). Resize your window. Voila! I tried many ways to use javascript and jQuery to trigger a resize event along the lines of: ``` $('#featinfo').on('shown.bs.modal', function () { ol.Map.event.trigger(map5, "resize"); //borrowed from google.maps.event. How to do this in ol3? }); ``` Help?

Original source