Add this code to the Custom CSS field on the Appearance tab of your Google Maps widget’s settings:
.eapps-google-maps-bar-container {
height: 320px;
width: 100%;
left: 0;
transition: width .3s, max-height .3s, top .3s .3s;
}
.eapps-google-maps-bar-toggle {
left: 100px;
top: -32px;
width: 24px;
height: 40px;
transform: rotate(-90deg);
}
.global-styles,
.eapps-google-maps:not(.eapps-google-maps-bar-opened)
.eapps-google-maps-bar-container {
top: 100% !important;
}
.global-styles,
.eapps-google-maps.eapps-google-maps-bar-opened
.eapps-google-maps-bar-container {
top: calc(100% - 320px) !important;
}
.eapps-google-maps-map-container {
left: 0;
width: 100%;
transition: width .3s, height .3s, top .3s .3s;
}
.global-styles,
.eapps-google-maps:not(.eapps-google-maps-bar-opened)
.eapps-google-maps-map-container {
height: 100% !important;
}
.global-styles,
.eapps-google-maps.eapps-google-maps-bar-opened
.eapps-google-maps-map-container {
height: calc(100% - 320px) !important;
}
Guys, if this code was helpful to you, please drop a line in the comments. Your feedback helps us improve our services and provide better solutions