Question

On my page, there is a container which use Google Maps API to display a map, there is a button below it, user can drag the map to a position, then click the button, I’d like to take the screenshot of the map displayed in the container now and show it in a canvas. Is it possible to do this with pure JavaScript?

Just need to support Chrome

Answer 1

It will be hard to do without browser support. But you can use Google Static Maps API:
https://developers.google.com/maps/documentation/staticmaps/

Example: https://developers.google.com/maps/documentation/staticmaps/#quick_example

---

There is some projects to draw HTML DOM to canvas:

• HTML2Canvas: http://html2canvas.hertzen.com/index.html
• jsFeedback: http://hertzen.com/experiments/jsfeedback/

You can also integrate javascript with some server-side solution (using webkit) for example phantomjs

Code example: (read more here)

var page = require('webpage').create();

page.open('http://www.google.com', function() {

    page.viewportSize = {width: 1024, height: 768};
    page.render('screenshot.png');
    phantom.exit();
});

---

If you need only chrome solution for specific range of users you can write your own chrome extension to do this: Taking screenshot using javascript for chrome extensions