Convert Google Map DIV into an image

Question

This is a simplifcation of my problem but one I would like clarity on.

I have a Google Maps object fitted into a div. Map is returning perfectly.

It has a WMS overlay on it (a data map of people born in the year 1990, for example). WMS layer over the map is returning perfectly.

My question is how do a convert that DIV canvas, containing the Google Map and WMS, to an image i.e PNG/GIF?

I have looked at the Static Map API but it's no good as I'm calling a WMS layer. Need to use Google APIv3

Why do you want to convert the div to an image format? Perhaps there is another way to solve your problem. — Trott, Sep 10 '14 at 04:50
I've been looking at this problem as well, posted more detailed post here http://stackoverflow.com/questions/38487549/convert-custom-google-map-into-an-image — Tatarin, Jul 20 '16 at 18:00

score 0 · Answer 1 · answered Mar 20 '19 at 12:32

You can use this Example and convert div to image

or Use this Code

$(function() { 
    $("#btnSave").click(function() { 
        html2canvas($("#widget"), {
            onrendered: function(canvas) {
                theCanvas = canvas;
                document.body.appendChild(canvas);

                // Convert and download as image 
                Canvas2Image.saveAsPNG(canvas); 
                $("#img-out").append(canvas);
                // Clean up 
                //document.body.removeChild(canvas);
            }
        });
    });
});

Convert Google Map DIV into an image

1 Answers1