How to print the twitter bootstrap pop-up based google map using JavaScript or Jquery?

Question

I'm trying to print the google map, which is inside the bootstrap pop-up. I have searched about this and find an good answer, i'm following the answer instruction but code does not showing the google map in print page.

HTML

<section id="contact-area" class="section">
    //.....
    // Here is other HTML Material
    <div style="display: none;" class="modal fade-scale" id="largeModal3" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button data-animation="flipInX" type="button" class="close revealOnScroll animated flipInX close-btn" data-dismiss="modal" aria-hidden="true"> </button>
          </div>
          <div class="modal-body popup-form">
            <div id="map-canvas"></div>
          </div>
          <div class="modal-footer"> </div>
        </div>
      </div>
    </div>
    //.....
    // Here is other HTML Material
</section> 

Print Function

function printElement(elem) {
        var domClone = elem.cloneNode(true);

         var $printSection = document.getElementById("map-canvas");

        if (!$printSection) {
        var $printSection = document.createElement("div");
        $printSection.id = "map-canvas";
        document.body.appendChild($printSection);
        }

        $printSection.innerHTML = "";
        $printSection.appendChild(domClone);
        window.print();
}

Code Execute

$('#map-canvas').parent().append('<button id="btnPrint">Print</button>');
    document.getElementById("btnPrint").onclick = function () {
    printElement(document.getElementById("map-canvas"));
}

When i execute the function then code showing other all the child html of id="contact-area" but it does not showing google map (I think it is inside the pop-up that's why). Can any one guide me regarding this issue that i can fix it. I will appreciate. Thank You