snapshot a div with html2canvas, with some application specific controls for a google map

snapshot a div with html2canvas

function snapshotDiv(snapdiv, snapdest, scale) {
	
	// requires html2canvas
	var spinnerDiv = document.createElement("div");
	var spinner = document.body.appendChild(spinnerDiv);
	
	$('#snapControl').hide();
	$(snapdiv + ' .gm-bundled-control').hide();
	$('#hideGoogleUICB').trigger('submit');
	
	spinnerDiv.innerHTML = '<i class="fa fa-spinner fa-spin fa-2x"></i><p>Please be patient, complicated sections take time to copy,<br>up to one minute for maps with many markers.</p>';
	spinnerDiv.setAttribute('style','text-align:center; z-index:3000;position:fixed;background-color:rgba(0,0,0,.8); color: white; top:50%; left:50%; transform: translate(-50%, -50%); padding: 20px 20px; '); 

	html2canvas(document.querySelector(snapdiv), {scale: scale, useCORS:true, 
		async:false}).then(canvas => {
			spinner.remove();
			var ocanvas = document.body.appendChild(canvas);
	
			var download = document.createElement("a");
			var image = ocanvas.toDataURL("image/png")
					.replace("image/png", "image/octet-stream");
			var imgFileSize = Math.round((image.length)*3/4) ;
			download.setAttribute("href", image );
			download.setAttribute("download",snapdest);
			download.dispatchEvent( new MouseEvent("click", {
				view: window,
				bubbles: false,
				cancelable: true
			}) ) ;
		ocanvas.remove();
		download.remove();
		$('#snapControl').show();
		$('#hideGoogleUICB').trigger('redo');
		
	}); //then;
	
}