jquery animate height not working in google map control

I'm trying to create my own control for Google maps v3. When the control button is clicked, it moves the map div higher on the page and expands the map height. (Yes, this is similar to Google map's fullscreen functionality, but my map is pinned to the bottom of the page with ScrollTrigger and when the user clicks the minimize button, the map disappears. So I'm making my own control to handle where I want the map to appear when it's minimized.)

Here is a link to my demo: https://newsinteractive.post-gazette.com/.demo/test.php

The code for the customized control is:

function createexpandControl(map) {
      const controlButton = document.createElement("button");

      // Set CSS for the control.
      controlButton.style.backgroundColor = "#fff";
      controlButton.style.border = "2px solid #fff";
      controlButton.style.borderRadius = "3px";
      controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
      controlButton.style.color = "rgb(25,25,25)";
      controlButton.style.cursor = "pointer";
      controlButton.style.fontFamily = "Arial,sans-serif";
      controlButton.style.fontSize = "16px";
      controlButton.style.lineHeight = "38px";
      controlButton.style.margin = "8px 0 22px";
      controlButton.style.padding = "0 5px";
      controlButton.style.textAlign = "center";
      controlButton.textContent = "Expand Map";
      controlButton.title = "Click to expand the map";
      controlButton.type = "button";
      // Setup the click event listeners
      controlButton.addEventListener("click", () => {
        
        $( "#map" ).animate({
            'height': '+=800px', //this does not work
            'top': '25vh', //this works
            'left': '0' //this works
          }, 1000);
        });
      return controlButton;
    }

Animating the width works, but not the height. I have tried setting 'height': '800px' but that also doesn't work.

Does anyone have any suggestions please?

Upon inspecting the demo, I found that the #map wrapper div has a max-height set to 210px, which restricts the height from expanding. Here is the updated script:

controlButton.addEventListener("click", () => {
    $("#map").css("max-height", "none");

    $( "#map" ).animate({
        'height': '+=800px',
        'top': '25vh',
        'left': '0'
      }, 1000);
    });
  return controlButton;
}