Google Maps in Bootstrap Modal. Pan/zoom mouse gestures not working

Question

I recently had the need to place a map in a bootstrap modal, which works fine except for the ability to pan and zoon with mouse interaction. Panning by clicking and dragging the mouse, and zooming by using the mouse wheel does not seem to work.

I have put up an example of the problem. (I have only tested it in Chromium and Firefox, on Kubuntu) http://jsfiddle.net/nG9nu/

   $("#myModal").on(
    'shown.bs.modal',

function () {

    var pos = new google.maps.LatLng(63.43, 10.39);
    var mapProp = {
        center: pos,
        zoom: 14,
        draggable: false,
        scrollwheel: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("mapCanvas"),
    mapProp);
    google.maps.event.trigger(map, "resize");
});

Any ideas what stops the mouse events to reach google maps? Or how to fix this particular problem?

I am very thankfull for all the help I can get :)

Answer 1

var mapProp = {
    center: pos,
    zoom: 14,
    draggable: false,
    scrollwheel: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

I can see

scrollWheel => false   
draggable => false

Of course it won't work : set them to 'true'

See this fiddle : http://jsfiddle.net/nG9nu/1/