9

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

wong2
  • 34,358
  • 48
  • 134
  • 179

1 Answers1

21

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:

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

Community
  • 1
  • 1
rogal111
  • 5,874
  • 2
  • 27
  • 33
  • only chrome need to be supported – wong2 Jul 21 '12 at 08:23
  • Are there any updates on this? Does API 3 give an ability to do this? – Jason Oct 02 '14 at 03:29
  • 1
    I tried using HTML2Canvas API, but it shows a blank image when taking screenshot of map. Dont know why – Faizan Jan 15 '15 at 15:31
  • There is a restriction for Google static map API, https://developers.google.com/maps/documentation/maps-static/intro#url-size-restriction "Maps Static API URLs are restricted to 8192 characters in size" – binary May 03 '18 at 00:27