document.getElementById("id_iframe").style.display = "none" not working

Question

i am developing an app in which i want to hide loading div after map is get loaded.but in my below code i am not able to hide or fadeout loading div.how could i hide this loading div?

.html

<div id="view-loading" class="view" style="text-align: center; margin: auto; display: none;
    z-index: 99; position: fixed;">
    <div class="loadingimg">
        saving...
    </div>
</div>

.js

 function gotopage() {
          document.getElementById('view-loading').style.display = "block";

          if (location== false) {
              document.getElementById('view-loading').style.display = "none";
              jAlert("Please make sure GPS is enabled. Please try again.");

          }
          else{

          $('#id_iframe').height(screen.height);

          document.getElementById("id_iframe").innerHTML = '<iframe style="width: 100%; height: 100%;" width="75%" height="75%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&amp;q=hospital&aq=&amp;sll=' + x + ',' + y + '&amp;sspn=0.040066,0.077162&ie=UTF8&hq=hospital&hnear=&amp;t=m&ll=' + x + ',' + y + '&amp;spn=0.007705,0.008669&z=14&output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&amp;q=hospital&aq=&amp;sll=' + x + ',' + y + '&amp;sspn=0.040066,0.077162&ie=UTF8&hq=hospital&hnear=&amp;t=m&ll=' + x + ',' + y + '&amp;spn=0.007705,0.008669&z=14" style="color:#0000FF;text-align:left"></a></small>';


          $.mobile.changePage('#nextPage', {
              transition: "none",
              reverse: false,
              changeHash: false
          });
          currentPage = 'nextPage';
          pageData.push(currentPage);

          document.getElementById('view-loading').style.display = "none";
          }
      }

Can anyone help ?