googlemaps-v3-print

HTML

<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyDkT5IxC3XOeHVkM7PBFnOd6Etp02VERRc"></script>
<script src="//rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.11.2/lodash.min.js"></script>
<div id="before_map">
Content before map
</div>
<div class="map-container"></div>
<div id="after_map">
<button class="map-print">print</button>
<br>
Content after map
</div>

CSS

body {
    margin: 8px;
}

.map-container {
    width:  640px;
    height: 480px;
    margin: .4rem;;
}

JavaScript

/**
 * My very own quite hackish approach to workaround Google Maps printing, 
 * crafted with <3.
 * @see http://stackoverflow.com/q/13050215/2013891
 */
$(function () {

  // Java
  var center = new google.maps.LatLng(-7.4917, 110.0044);

  // Jakarta, Bogor, Bekasi, Tangerang, Surabaya
  var locations = [
    { lat: -6.1745, lng: 106.8227 },
    { lat: -6.6000, lng: 106.8000 },
    { lat: -6.2333, lng: 107.0000 },
    { lat: -6.1783, lng: 106.6319 },
    { lat: -7.2653, lng: 112.7425 },
  ];

  var mapContainer = $('.map-container');
  var map          = new google.maps.Map(mapContainer[0], {
    center: center,
    zoom  : 5,
  });

  var markers = _(locations)
    .map(function (loc) {
      return new google.maps.Marker({
        position: new google.maps.LatLng(loc.lat, loc.lng),
      });
    })
    .forEach(function (marker) {
      marker.setMap(map);
    });

  new MarkerClusterer(map, markers);

  var directionsDisplay = new google.maps.DirectionsRenderer();
  var directionsService = new google.maps.DirectionsService();

  directionsDisplay.setMap(map);
  (function displayRoute() {
    directionsService.route({
      origin     : 'Jakarta',
      destination: 'Bandung',
      travelMode : google.maps.TravelMode.DRIVING,
    }, function (response, status) {

      if (status === google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      } else {
        console.log('Directions request failed due to ' + status);
      }
    });
  }());

  $('.map-print').on('click',

    /*
     * Print dat maps!
     */
    function printMaps() {
      var body               = $('body');
      var appendMap          = $('#before_map');
      var prependMap         = $('#after_map');
      var mapContainer       = $('.map-container');
      var printContainer     = $('<div>');
			
      printContainer
      	.prepend(appendMap)
        .addClass('print-container')
        .css('position', 'relative')
       ...