Bdtjtk

I'm following a guide that allows Google Map screen to disable scrolling depending on the screen size. The only part i'm struggling is to write a code that dynamically changes the True/False value when i resize the screen manually.

This is the website that I followed the instruction but I can't seem to write the correct syntax code to produce the dynamic true false value depending on the screen size https://coderwall.com/p/pgm8xa/disable-google-maps-scrolling-on-mobile-layout

Part of the code that i need to use:

$(window).resize()

And then:

setOptions()

So I'm struggling to combine them together.

I have tried something like this:

var dragging = $(window).width(function resize() {

    if (dragging > 560) {

        return true;

    } else {

        return false;

    }

});

The article you linked to is lacking important information as it fails to mention that $ is (presumably) jQuery. But you don't need jQuery at all.
What you can use instead is the MediaQueryList. It is similar to media queries in CSS, but it is a JavaScript API.

The following is an untested example of how you might use it with a MediaQueryList event listener. It sets the initial value and listens to changes to your media query with a handler that uses setOptions from the Google Maps API.

var mql = window.matchMedia('(min-width: 560px)');

var isDraggable = mql.matches;



var map;

function initMap() {

  map = new google.maps.Map(document.getElementById('map'), {

    draggable: isDraggable

  });

}



function mqChange(e) {

  map.setOptions({draggable: !!e.matches});

}



mql.addListener(mqChange);

You could add an event listener to the resize event and set a value of your variable whenever the size of the window is changed:

var dragging = false;

window.addEventListener('resize', function(event) {

  dragging = window.innerWidth > 560;

});

Since you mentioned that you want to disable scrolling when the windows size extends a certain value, it might be easier to just do this. If you try it you can see in the console that the value changes whenever you resize your window):

window.addEventListener('resize', function(event) {

  console.log(window.innerWidth);

  if (window.innerWidth > 560) {

    // disable scrolling or do whatever you want to do

  }

});

BTW, in your code you do this:

 if (dragging > 560) {

     return true;

 } else {

     return false;

 }

You can simplify this to:

return dragging > 560

Which is exactly the same.

You can use this function to get the width and height on a resize of the screen.

$(window).resize(function() {

    $windowWidth = $(window).width();

    $windowHeight = $(window).height();

    // run other functions or code

});

But, if you want to only show/hide a html element based on the screen size, you can also use plain html/css.

<div id="maps"></div>

Css:

@media only screen and (max-width: 560px) {

    #maps {

        display: none;

    }

}

you can use the matchMedia function to run a callback whenever the media query status is changing

var mql = window.matchMedia('(min-width: 700px)');



function mediaHandler(e) {

   if (e.matches) {

      /* the viewport is more than 700 pixels wide */

   } else {

      /* the viewport is 700 pixels wide or less */

   }

}



mql.addListener(mediaHandler);