title: Google Map image with directions route print
body: <p>The problem is that when i try to print the div contents then the route is not printed with it. 
  i have read the following link - <a href="https://stackoverflow.com/questions/15807896/print-google-map-with-directions-on-it">Print google map with directions on it</a><br>
  but in vain. I also read the Google map static image api - <a href="https://developers.google.com/maps/documentation/staticmaps/#Paths" rel="nofollow noreferrer">https://developers.google.com/maps/documentation/staticmaps/#Paths</a>  but i think there is no mechanism to print the map image along with route.</p>
  
  <p>My code is - </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    function PrintElem(elem)
      {
          Popup($(elem).html());
      }
  
      function Popup(data) 
      {
          var mywindow = window.open('', 'map-canvas', 'height=1200,width=700');
          mywindow.document.write(data);
          mywindow.print();
          mywindow.close();
  
          return true;
      }
  
  var display = new google.maps.DirectionsRenderer({draggable: true});
  var dirService = new google.maps.DirectionsService();
  
  function initialize() {
  
      var exCentre = new google.maps.LatLng(x1, y1);
      var boardPoint = new google.maps.LatLng(x2, y2); // x1, y1, x2, y2 are coordinates
  
      var amarker = new google.maps.Marker({position:exCentre});
      var bmarker = new google.maps.Marker({position:boardPoint});
      
      var mapOptions = {zoom:10,center: exCentre};
      var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
      amarker.setMap(map);
      bmarker.setMap(map);
      display.setMap(map);
      display.setOptions( { suppressMarkers: true } );
      var request = {origin: exCentre, destination: boardPoint,travelMode: google.maps.TravelMode.DRIVING};
  
      dirService.route(request, function(response, status) {
      if (status === google.maps.DirectionsStatus.OK){
          display.setDirections(response);}
      });
  
  }
  
  google.maps.event.addDomListener(window, 'load', initialize);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#map-canvas{
  margin: 0;
    padding: 0;
    width: 1000px;
    height: 500px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" &gt; &lt;/script&gt; 
  &lt;script src="http://maps.googleapis.com/maps/api/js" type="text/javascript" &gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
   &lt;div id="map-canvas"&gt;&lt;/div&gt;
   &lt;input type="button" value="Print Div" onclick="PrintElem('#map-canvas')" /&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Pls help. Thanks in advance</p>