Google Maps Javascript API - Legend Max Height

Question

I'm displaying a map using Google Maps Javascript API and have created a custom legend to toggle certain map paths/markers on and off. The data in the legend is loaded by PHP using entries in a database, so I don't have control over how many checkboxes will be present. At the moment, the legend div expands as required to accommodate however many checkboxes are required, but I'm looking to stop it from expanding beyond the confines of the map.

At the moment, my legend displays as below:

And when I move the bottom of the browser up to reduce the screen height, it draws the div beyond the bottom of the screen:

Does anyone know of a way to tell the div not to expand vertically beyond the edge of the map? I could obviously set a max-height value based on the height of the map, minus the top position of the legend div, but I'm looking for something a little more native, possibly along the lines of map.controls[google.maps.ControlPosition.LEFT_TOP].push(document.getElementById('mapLegend')); but for setting the bottom most value? That way, the map can adjust as required even on mobile or small screens (like in the second screenshot where the Google logo displays over the legend).

I know this is a very open ended question but I would appreciate any help or pointers anyone can give.

Thanks in advance.

Answer 1

I ended up using the CSS calc function to manually set the max height of the legend depending on the size of the screen.

    .mapLegend {
        height: auto;
        max-height: calc(100vh - 175px);       /* Top bar, plus height of Google logo at bottom, plus absolute top position of Legend div, plus buffer */
    }

    @media (max-height: 269px) {
        .mapLegend {
            height: auto;
            max-height: calc(100vh - 120px);    /* When screen <270px tall, some Google Maps controls are hidden, so legend moves up, so can expand further down the bottom */
        }
    }

By setting the height to auto, it will only be as big as it needs to be to accommodate as many checkboxes as are necessary, and the max-height stops the overflow from extending beyond the bottom of the screen. Note that on small screens (or when a tall screen is dragged up to reduce it's height), the Google Maps UI changes to hide some non-essential controls, so I added the screen height breakpoint to cater for this.

Hope this helps someone.