How to take a screenshot for part of Google Maps using JavaScript

Question

On my page there is a container that uses the Google Maps API to display the map, there is a button under it, the user can drag the map to a position, then click the button, I want to take a screenshot of the screen displayed in the container, and show it on the canvas. Can this be done using pure JavaScript?

Just need to support Chrome

Answer 1

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

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

---

There are several projects for drawing HTML DOM on 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) like phantomjs

Code example: (more info 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 only need a chrome solution for a specific range of users, you can write your own chrome extension to do this: Screenshot using javascript for chrome extensions