Sliding div inside google maps

Question

I am looking to create an expandable div that slides in from the right on google maps. The functionality should be similar to what the #app-viewcard-strip does here: https://www.google.com/maps/@41.5278682,-76.2402656,12z

Video for reference: https://streamable.com/afrk3

The main functionality being that the div is apart of the controls and moves the controls upwards to fit the div. I am looking to do the same functionality but move controls to the left.

I have a prototype here: https://codepen.io/ParoXsitiC/pen/EzLMZv

However I cannot get the #mySidenav to be contained within #mapPlaceholder

Answer 1

The absolute position is calculated from the closest parent that has either position relative or position absolute. So just add position:relative; to #mapPlaceholder.