Make Jvectormap Scrollable onClick event

Question

i have a web page that has a jvectormap in the center of the page, while scrolling you most of the times scroll inside the map instead of the page, i want to make it so that you need to click on the map to be able to scroll inside it, and also, when you move the mouse out of the vectormap the scroll inside the map is disabled.

reading documentation about jvectormap i found that you can change the initial value of the zoomOnScroll variable after it's initialize, but i haven't found a clear example of how to do it. also, when i create an event listener for moustout on the map, it overlaps with the onRegionOut event, meaning that when the user moves the mouse from country to country the will not be able to scroll the map.

here's my code so far.

if (document.getElementById('vector-map-world')) {
            var world_markers = [
            {'latLng': [-32.9521399, -60.7681972], 'name': 'Locación Rosario'},
            {'latLng': [-34.6131708, -58.3810633], 'name': 'Locación Buenos Aires'},  
            ];

        var mapObject = $('#vector-map-world').vectorMap('get', 'mapObject');
        mapObject.setFocusLatLng = function(scale, lat, lng){
            var point,
            proj = jvm.WorldMap.maps[this.params.map].projection,
            centralMeridian = proj.centralMeridian,
            width = this.width - this.baseTransX * 2 * this.baseScale,
            height = this.height - this.baseTransY * 2 * this.baseScale,
            inset,
            bbox,
            scaleFactor = this.scale / this.baseScale,
            centerX,
            centerY;

            if (lng < (-180 + centralMeridian)) {
                lng += 360;
            }

            point = jvm.Proj[proj.type](lat, lng, centralMeridian);

            inset = this.getInsetForPoint(point.x, point.y);
            if (inset) {
                bbox = inset.bbox;

                centerX = (point.x - bbox[0].x) / (bbox[1].x - bbox[0].x);
                centerY = (point.y - bbox[0].y) / (bbox[1].y - bbox[0].y);

                this.setFocus(scale, centerX, centerY);
            }
        }
        mapObject.removeAllMarkers();
        mapObject.addMarkers(world_markers);
        mapObject.setFocusLatLng(4,-32.9521399, -60.7681972)
        $('#vector-map-world').on( "click", function() {
            console.log("you can scroll now");
        });
        $('#vector-map-world').on( "mouseout", function() {
            console.log("you can't scroll now");
        });
        }

Answer 1

In the end i decided to not use a jvectormap, instead i used a google map, which can be set to scroll on click easily.

here's an example of what i did.

        var mapObj = new GMaps({
            div: '#map-markers',
            scrollwheel: false // Initialize on false so that it requieres a click to be able to scroll
        });

        mapObj.addListener( 'click', function(event){
            this.setOptions({scrollwheel:true}); // allow to scroll con click
        });
        mapObj.addListener( 'mouseout', function(event){
            this.setOptions({scrollwheel:false});  // disable scroll when the mouse leaves the map box

        });