0

I had a function to fill google maps in my html page and I call function 

popUpLoadingScreen()
{
    $("#mapLoadingUIId").css("display","block");
}

function dismissLoadingScreen()
{
    $("#mapLoadingUIId").css("display", "none");
}

to show loading message while the markers rendered on the map but it didn't appear, and when I put a break point to know what's the problem the sign appears but in the normal run it doesn't appear so I what to know where is the problem?

the HTML part: 

<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 css part:

.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 js that call the functions:

function renderWells(wells) {
    popUpLoadingScreen();
    //some code to run
    dismissLoadingScreen();
}
Amr Rady
  • 1,057
  • 1
  • 12
  • 24
  • 1
    Possible duplicate of [DOM refresh on long running function](http://stackoverflow.com/questions/16876394/dom-refresh-on-long-running-function) – CBroe Feb 14 '17 at 11:06
  • Use event listeners? Also, http://stackoverflow.com/questions/16876394/dom-refresh-on-long-running-function – evolutionxbox Feb 14 '17 at 11:10
  • after your comment i tried my page on firefox and the loading screen appears there but not on chrome – Amr Rady Feb 14 '17 at 11:27

2 Answers2

0

Probably the code runs too fast and you are not able to see the message (It explains why you are still able to see it by putting a breakpoint). Consider also that the map rendering could be asynchronous and renderWells execution is completed before the actual map loading.

Take a look to the gmaps events documentation and check the available events you can handle in order to figure out when the loading is complete.

Documentation: https://developers.google.com/maps/documentation/javascript/events

Marco Ferrantini
  • 381
  • 2
  • 10
0

The dismissLoadingScreen() method is probably being called much before you intend it. Check you code for which stage are you dismissing the loader. I think its too early.

Shubhansh Sahai
  • 34
  • 7
  • no it not, i checked that, the loading screen appears on firefox – Amr Rady Feb 14 '17 at 11:32
  • The code in between popup and dismiss methods that you are running is asynchronous I assume. And if it is so then you need to write the dismiss method inside the callback of the async function. – Shubhansh Sahai Feb 14 '17 at 12:12