Google snazzy maps live event listener javascript

I have made a google map using snazzy maps for my website and managed to get it so when the screen is loaded at below 480px, the map is not draggable. Although this works fine, can I add an event listener or something to this so it knows when I have scaled the screen down to under 480px instead of it only doing it on load?

Im a beginner with javascript so hopefully this makes sense!

see the code below! thanks!

google.maps.event.addDomListener(window, 'load', init);

function init() {

var isDraggable = $(document).width() > 480 ? true : false;

var mapOptions = {
    draggable: isDraggable,
    zoom: 14,
    scrollwheel: false,
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    streetViewControl: false,
    center: new google.maps.LatLng(51.775976, -1.264611), 

    styles: [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#ccd3d7"},{"visibility":"on"}]}]
};

var icon = {
    url: '../wp-content/themes/Feather/assets/images/map-pin.png',
    scaledSize: new google.maps.Size(30, 45)
};

var mapElement = document.getElementById('map');

var map = new google.maps.Map(mapElement, mapOptions);

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(51.775976, -1.264611),
    map: map,
    animation: google.maps.Animation.DROP,
    icon: icon
});

}