Google maps bounds/zoom not working when parent div is hidden

I have a large page of user data that is formatted for ease of use using accordion areas. Click on the accordion control and the relevant information is shown. Click it again and it is hidden.

One of these accordions has a google map inside it with multiple pins. When the parent accordion div is hidden bounds/zoom has no effect. When it is visible bounds/zoom works.

I can only imagine that the DOM has the collapsing parent div set to zero height and therefor Google Maps 'sees' this as zero all the way down the stack and sets bounds based on a zero height and width accordingly.

Here is a fiddle:

https://jsfiddle.net/wjebusfL/1/

The default is to have the accordion closed. When you click the open button you will see that the map contains two markers but the zoom is way off.

If you comment out the display and opacity lines in the css for .accordianarea

display: none;
opacity: 0;

You will see the accordion in an open state by default and the map bounds/zoom working OK.

Is there any way to 'force' the google map to render correctly with the accordion closed?

from Google maps bounds/zoom not working when parent div is hidden