Making a "screenshot" of the current website using HTML or JavaScript?

Question

I have tried html2canvas, but did not work as expected, because I am using Google Maps with custom markers and when it will just make a screenshot of the map without these markers.

I want to make a screenshot so that it looks like:

But the result is:

The chart does also not look that great. Are there any alternatives I can use?

Here is the code I used to create an image using html2canvas (where #downloadPDF is a button):

<script type="text/javascript">
jQuery(document).ready(function ($) {
    $('#downloadPDF').click(function () {
        html2canvas($(".map"), {
            logging: true,
            useCORS: true,
            onrendered: function (canvas) {
                var imgData = canvas.toDataURL('image/png');
                window.open(imgData);
            }
        });
    });
});

Answer 1

Not sure on your hosting setup, but I have used PhantomJS to create screenshots of web pages, and save them as images or PDFs.

When you download the library, there is a rasterize.js in the example directory which allows you to pass in arguments to save a URL. You could modify this so that it pauses for a few seconds, then saves the page - giving the map enough time to load properly.

http://phantomjs.org