karlazz · November 14, 2019 18:59
diff --git a/write a map to a file b/write a map to a file
 <!DOCTYPE html>
 <html>
 <head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js" type="text/javascript"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js" type="text/javascript"></script>
 	<script src="html2canvas.min.js" type="text/javascript"></script>

    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 50%;  /* The width is the width of the web page */
        margin: auto;
       }
    </style>
    
 </head>

 <body>
 	<button id="snapshot">Download</button>
 	
 	<h3>My Google Maps Demo</h3>
 	
 	<!--The div element for the map -->
 	<div id="map"></div>
 	<script>
 	// Initialize and add the map
 	function initMap() {
 		// The location of Uluru
 		var uluru = {lat: -25.344, lng: 131.036};
 		// The map, centered at Uluru
 		var map = new google.maps.Map(
 		  document.getElementById('map'), {zoom: 4, center: uluru});
 		// The marker, positioned at Uluru
 		var marker = new google.maps.Marker({position: uluru, map: map});
 	}
 	</script>
 	<script>
 		$('#snapshot').on('click',function () {
 		
 			html2canvas(document.querySelector('.gm-style'), {useCORS:true, 
        async:false}).then(canvas => {
 			
 			var ocanvas = document.body.appendChild(canvas);
 			
 			var download = document.createElement("a");
        	var image = ocanvas.toDataURL("image/png")
                    .replace("image/png", "image/octet-stream");
                    
        	download.setAttribute("href", image );
        	download.setAttribute("download",'mapfile.png');
 			download.dispatchEvent( new MouseEvent("click", {
 				view: window,
 				bubbles: false,
 				cancelable: true
 			  }) ) ;
        	ocanvas.remove();
        	download.remove();
        	//image.remove();
 			}); //html2canvas
 		}); //snapshot
 		
 	</script>

 	<script async defer src="https://maps.googleapis.com/maps/api/js?key=yourkey&callback=initMap">
 	</script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js" type="text/javascript"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js" type="text/javascript"></script>
	<script src="html2canvas.min.js" type="text/javascript"></script>

	<style>
	/* Set the size of the div element that contains the map */
	#map {
	height: 400px; /* The height is 400 pixels */
	width: 50%; /* The width is the width of the web page */
	margin: auto;
	}
	</style>

	</head>

	<body>
	<button id="snapshot">Download</button>

	<h3>My Google Maps Demo</h3>

	<!--The div element for the map -->
	<div id="map"></div>
	<script>
	// Initialize and add the map
	function initMap() {
	// The location of Uluru
	var uluru = {lat: -25.344, lng: 131.036};
	// The map, centered at Uluru
	var map = new google.maps.Map(
	document.getElementById('map'), {zoom: 4, center: uluru});
	// The marker, positioned at Uluru
	var marker = new google.maps.Marker({position: uluru, map: map});
	}
	</script>
	<script>
	$('#snapshot').on('click',function () {

	html2canvas(document.querySelector('.gm-style'), {useCORS:true,
	async:false}).then(canvas => {

	var ocanvas = document.body.appendChild(canvas);

	var download = document.createElement("a");
	var image = ocanvas.toDataURL("image/png")
	.replace("image/png", "image/octet-stream");

	download.setAttribute("href", image );
	download.setAttribute("download",'mapfile.png');
	download.dispatchEvent( new MouseEvent("click", {
	view: window,
	bubbles: false,
	cancelable: true
	}) ) ;
	ocanvas.remove();
	download.remove();
	//image.remove();
	}); //html2canvas
	}); //snapshot

	</script>

	<script async defer src="https://maps.googleapis.com/maps/api/js?key=yourkey&callback=initMap">
	</script>
	</body>
	</html>