I´m trying to print a div containing a google map that contains a route and some markers along with a table containing some info. When I print that map everything works fine except for the route and the markers. They just wont print with the map. For what I´ve read this is because route and markes are inside a canvas, but I cannot get it to work. Can someone help me on how I can change the logic I ´m using?. Below is the code:
HTML:
<div id="divMapas" class="col-md-9 affix-container">
<div id="map-container" class="map-container">
<h3 class="text-left">
<button class="pull-left btn" ng-click="mostrarOcultarBarra()">{{labelBotonMostrar}}</button>
<div class="dropdown pull-left" ng-show="tituloMapa" style="padding-left: 2px;">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Acciones
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><button class="btn-link" ng-click="CrearKML()">Exportar a KML</button></li>
<li><button class="btn-link" ng-click="CrearGPX()">Exportar a GPX</button></li>
<li><button class="btn-link" ng-click="print()">Imprimir</button></li>
<li><button class="btn-link" ng-click="printNuevo('#divMapas')">Imprimir Nuevo</button></li>
</ul>
</div>
<div class="divider" />
{{tituloMapa || ' '}}
</h3>
<map id="mapaPrincipal" zoom="11" center="{{posicionInicialMapa}}" style="height: 30em;"></map>
<div class="tabla-paradas">
<table class="table table-striped text-center">
<tr>
<th class="text-center">#</th>
<th class="text-center">Nombre</th>
<th class="text-center">1<sup>er</sup> Horario</th>
<th class="text-center">2<sup>do</sup> Horario</th>
<th class="text-center">3<sup>er</sup> Horario</th>
</tr>
<tr class="cursor-pointer" ng-repeat="Parada in recorridoSeleccionado.Paradas" ng-click="centrarParadaEnMapa(Parada)">
<td>{{$index + 1}}</td>
<td>{{Parada.Nombre}}</td>
<td>{{Parada.Horario1 | formatTime}}</td>
<td>{{Parada.Horario2 | formatTime}}</td>
<td>{{Parada.Horario3 | formatTime}}</td>
</tr>
</table>
</div>
</div>
</div>
Javascript:
scope.printNuevo = function (elem) {
Popup($(elem).html());
}
function Popup(data) {
var mywindow = window.open('', 'my div', 'height=400,width=600');
mywindow.document.write('<html><head><title>my div</title>');
/*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.print();
mywindow.close();
return true;
}
