PrintMapControl.js
4.47 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
/// <reference path="../Scripts/typings/jquery/jquery.d.ts" />
/// <reference path="../typings/google.maps.d.ts" />
function printMapControl(map) {
"use strict";
if (!isCanvasSupported()) {
return null;
}
var controlDiv = printMapButton("Print", "printMap");
google.maps.event.addDomListener(controlDiv, "click", function () {
printMap(map);
});
return controlDiv;
}
function isCanvasSupported() {
"use strict";
var elem = document.createElement("canvas");
return !!(elem.getContext && elem.getContext("2d"));
}
function printMap(map) {
"use strict";
var mapControlVisible = map.mapTypeControl;
var zoomVisible = map.zoomControl;
var streetViewVisible = map.streetViewControl;
var panVisible = map.panControl;
var fullscreenVisible = map.fullscreenControl;
map.setOptions({
mapTypeControl: false,
zoomControl: false,
streetViewControl: false,
panControl: false,
fullscreenControl: false
});
map.controls.forEach(function (array) {
array.forEach(function (elem) {
$(elem).hide();
});
});
var showControls = function () {
map.setOptions({
mapTypeControl: mapControlVisible,
zoomControl: zoomVisible,
streetViewControl: streetViewVisible,
panControl: panVisible,
fullscreenControl: fullscreenVisible
});
map.controls.forEach(function (array) {
array.forEach(function (elem) {
$(elem).show();
});
});
};
var popUpAndPrint = function () {
try {
var dataUrl = [];
var container = map.getDiv();
$(container)
.find("canvas")
.filter(function () {
dataUrl.push(this.toDataURL("image/png"));
});
var clone = $(container).clone();
var width = container.clientWidth;
var height = container.clientHeight;
$(clone)
.find("canvas")
.each(function (i, item) {
$(item)
.replaceWith($("<img>")
.attr("src", dataUrl[i]))
.css("position", "absolute")
.css("left", "0")
.css("top", "0")
.css("width", width + "px")
.css("height", height + "px");
});
var printWindow = window.open("", "PrintMap", "width=" + width + ",height=" + height);
if (printWindow == null) {
throw new Error("Unable to display the print dialog, you might need to allow popups on this site");
}
printWindow.document.writeln($(clone).html());
printWindow.document.close();
printWindow.focus();
printWindow.print();
printWindow.close();
}
catch (error) {
alert(error.message);
}
finally {
showControls();
}
};
setTimeout(popUpAndPrint, 500);
}
function printMapButton(text, className) {
"use strict";
var controlDiv = document.createElement("div");
controlDiv.className = className;
controlDiv.index = 1;
controlDiv.style.padding = "10px";
// set CSS for the control border.
var controlUi = document.createElement("div");
controlUi.style.backgroundColor = "rgb(255, 255, 255)";
controlUi.style.color = "#565656";
controlUi.style.cursor = "pointer";
controlUi.style.textAlign = "center";
controlUi.style.boxShadow = "rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px";
controlDiv.appendChild(controlUi);
// set CSS for the control interior.
var controlText = document.createElement("div");
controlText.style.fontFamily = "Roboto,Arial,sans-serif";
controlText.style.fontSize = "11px";
controlText.style.paddingTop = "8px";
controlText.style.paddingBottom = "8px";
controlText.style.paddingLeft = "8px";
controlText.style.paddingRight = "8px";
controlText.innerHTML = text;
controlUi.appendChild(controlText);
$(controlUi).on("mouseenter", function () {
controlUi.style.backgroundColor = "rgb(235, 235, 235)";
controlUi.style.color = "#000";
});
$(controlUi).on("mouseleave", function () {
controlUi.style.backgroundColor = "rgb(255, 255, 255)";
controlUi.style.color = "#565656";
});
return controlDiv;
}