Высота анимации jquery не работает в элементе управления картой Google ⇐ Jquery

[Anonymous]

Я пытаюсь создать собственный элемент управления для карт Google v3. При нажатии кнопки управления элемент управления перемещается выше на странице и увеличивается высота карты. (Да, это похоже на полноэкранную функциональность карты Google, но моя карта прикреплена к нижней части страницы с помощью ScrollTrigger, и когда пользователь нажимает кнопку свертывания, карта исчезает. Поэтому я создаю свой собственный элемент управления, чтобы определять, где я хочу, чтобы карта отображалась в свернутом виде.)
Вот ссылка на мою демо-версию:
https://newsinteractive.post-gazette.com/.demo/test.php
Код настраиваемого элемента управления:

Код: Выделить всё

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;
}

Анимация ширины работает, но не высоты. Я попробовал установить «высоту»: «800px», но это тоже не работает.
У кого-нибудь есть предложения?

Подробнее здесь: https://stackoverflow.com/questions/791 ... ap-control