Print the map by parent page with routes and paths

Question

In my project the google map has routes and paths. I need to print the map with them. This page is called as a iframe by it's parent page. I have to call print method within parent page. Note: There are more content other than the map in this iframe. This is the method I tried so far to print the map

<script type="text/javascript">
function printWin(){

    var iframe=document.getElementById('iframe');
    var innerdoc=iframe.contentDocument || iframe.contentWindow.document;
    var mapdiv=innerdoc.getElementById('gmap');
    if(mapdiv === null){
        window.print();
    }else{
var isVisisble = $('#iframe').contents().find('#gmap').is(':visible');

if(isVisisble){
    var win=window.open();
        win.document.write(mapdiv.innerHTML);
        win.print();
        win.close();    
}else{
    window.print();
}
    }
}
</script>

This is the code in iframe for map

<div id="map">
<div style="margin-left: 50px;" id="gmap"><p>Please wait...</p></div>
</div>
</div>

This map is generate by $.post request within the same page. When I used above printWin() function only the map is print without routes and paths. If I used simply window.print() in parent page I can print only routes and paths without the map.

I have tried to create print method inside this iframe and call it by parent page. But it doesn't work for me.

I have seen related questions though different scenarios to my situation. I tried them. Any clue or reference would be appreciate.

UPDATE: I added separate style sheet for @media print

@media print {

     body * {
    visibility: hidden;!important;
  }

  #gmap {
    position: absolute; !important;
    left: 0;
    top: 0;
  }
}

But still I'm getting only the map without markers.

Answer 1

Is this the kind of thing you're after? http://www.sweet-web-design.com/wordpress/how-to-print-google-maps/1100/