var divNavDrawer, divOpenCtrl;

function initNavDrawerUI(drawerId,openCtrlId, map) {
    divNavDrawer = document.getElementById(drawerId);
    divNavDrawer.style.width = "0px";
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(divNavDrawer);
    divOpenCtrl = document.getElementById(openCtrlId);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(divOpenCtrl);
}

var navWidth = 500;
var navOpen=false;

function toggleNav(){

    //this is a bit of a hack to make the navdrawer close. (by seeting width as zero in css)
    var w = divNavDrawer.style.width;
    if (w==='0px'){
        $sidenav =  $('#mySidenav');
        $sidenav.addClass('notransition'); // Disable transitions
        divNavDrawer.style.left = '-' + navWidth + 'px';
        divNavDrawer.style.width = navWidth + 'px';
        $sidenav[0].offsetHeight;
        $sidenav.removeClass('notransition'); // Re-enable transitions
    }
    $('#openSideNav').toggleClass('glyphicon-menu-right').toggleClass('glyphicon-menu-left')
    if (navOpen){
        closeNav();
    } else {
        openNav();
    }
}