Необходимо на сайте распечатать карту. При печати отображается почти все необходимое, кроме карты. Маркеры видео отлично и расстояние. В чем может быть проблема?
function initialize() {
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(47.840187, 35.137507),
disableDefaultUI: true,
zoomControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
if($(window).width() < 1000)
{
mapOptions.draggable = false;
}
map = new google.maps.Map(document.querySelector('#map-canvas'), mapOptions);
directionsDisplay.setMap(map);
@media print {
.noprint {
display: none;
}
#map-canvas {
margin: 0 auto;
width: 914px;
height: 616px;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
#noprint {
display: none;
}
}
<div class="row">
<div class="col-md-8">
<div class="map">
<div id="map-canvas"></div>
<div class="container">
<div class="row">
<form class="calculator-form ">
<div class="form-section">
<div class="address-inputs">
<div class="distance-preview">
<span class="value">00</span><br>
<span class="measure">Км</span>
</div>
<label for="from" class="text-label">
<input type="text" class="fromAddr" name="from" placeholder="Пункт А" autocomplete="off" id="fromAddr" >
</label><br>
<label for="to" class="text-label">
<input type="text" class="toAddr" name="to" placeholder="Пункт В" autocomplete="off" id="toAddr">
</label>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
background
, который при печати намеренно скрывается браузером. Правда, как исправить, не знаю