Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Save current Google Map as image

How can I save the current google map as an image? Below is the Javascript I use to initialize the map.

var myMarker = new google.maps.LatLng(result[0].centerLat, result[0].centerLong); var myOptions = {   disableDoubleClickZoom: true,   zoom: result[0].zoom,   center: myMarker,   mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

I had a look at https://developers.google.com/maps/documentation/javascript/reference#Map but there seems to be no method that returns a URL or image for the current map object. Is it possible to save the map as an image in some way?

like image 538
Ewald Stieger Avatar asked Apr 26 '13 11:04

Ewald Stieger


People also ask

Can I export a Google map as image?

Google Maps API V3 provides Static Maps API to export / convert / save Google Maps to Image.

Can you publish a screenshot of Google Maps?

All uses of Google Maps, Google Earth, and Street View content must provide attribution to Google and, if applicable, to our data providers. We do not approve of any use of content without proper attribution, in any circumstances, and we require attribution while the content is shown.


1 Answers

If you want to save more than google maps static API allows (such as custom overlays drawn onto it too complex/large to pass through the querystring), you could export the map container to a canvas using something like html2Canvas (http://html2canvas.hertzen.com/), then convert it to a data URL and do with it as you wish.

function saveMapToDataUrl() {      var element = $("#mapDiv");      html2canvas(element, {         useCORS: true,         onrendered: function(canvas) {             var dataUrl= canvas.toDataURL("image/png");              // DO SOMETHING WITH THE DATAURL             // Eg. write it to the page             document.write('<img src="' + dataUrl + '"/>');         }     }); } 

I believe you need to set the useCORS option to true in order to allow the function to download images from google.

The downside to this approach is it could leave you with about a megabyte of data sitting on your page.

I've tried to use this approach to EXPORT a map to an image to download, but have run into problems in how to get this image to the person in a nice manor. You could use a hyperlink which has it's href attribute set to the dataUrl you created, but the file name cannot be set unless you use HTML attributes like download="filename.png", which has been problematic on different browsers for me. Another approach is to post the dataUrl to the server for the server to then dish out like it needs to, but uploading a large image only to download it again does seem a strange way to handle this.

like image 69
Arkiliknam Avatar answered Sep 24 '22 16:09

Arkiliknam