I implemented a function to display a loading screen on my HTML page with Google Maps integration. However, when I called the function popUpLoadingScreen() and dismissLoadingScreen() to show and hide the loading message while rendering map markers, the loading screen didn't appear as expected. Even when I added a breakpoint to investigate the issue, the loading sign only appeared in debug mode but not in normal execution. Can you help me identify where the problem lies?
The relevant HTML section:
<div id="mapLoadingUIId" class="mapLoadingUI">
Loading...
</div>
<div id="map" class="mapBody"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASTMSvPns7Zclg5dAGYTMQgtwia5nQy0M&callback=initMap"></script>
The associated CSS styles:
.mapLoadingUI {
display:none;
position: fixed;
left: 324px;
top: 48px;
min-width: 1500px;
min-height: 100px;
z-index: 9999;
background-color:#87cefa;
z-index:1000;
text-align:center;
line-height: 100px;
font-family: Arial;
font-size: 14px;
font-weight: 500;
font-style: normal;
font-stretch: normal;
}
The JavaScript code calling the functions:
function renderWells(wells) {
popUpLoadingScreen();
//code to render map markers
dismissLoadingScreen();
}