Category: Javascript

Export Google Map Currently Displayed Map Using Html2Canvas

Posted on in category: Design Javascript Map Drawings

For this to work, you would need jQuery and Html2Canvas js libaries. Add a button and then add a click handler to initiate this function and it will export the image in DataURI base64 string format. From there on you can either display it in an image placeholder or save the string in database, email it or let the user download it.

$(document).ready(function() {
 function saveMapToDataUrl() {

    var element = $("#map_canvas").find(".gm-style")[0];
    html2canvas(element, {
        useCORS: true,
        onrendered: function(canvas) {
           dataUrl= canvas.toDataURL("image/png");
            // Eg. write it to the page
                var image = document.getElementById('saveImage');
              image.src = dataUrl;


dataURI is a base64 encoded string which in other words means a simple file. Getting the contents of a file as a string means that you can have a light weight image in string format to directly embed the data within your HTML or  CSS . When the browser intercepts a data URI, it is able to handle and decode the data and construct or build the original file, which in this case would be an image in png format.