CODEWITHSUNDEEP
javascriptgoogle-mapscanvas
wong2
wong2

Reputation: 35700

How to take the screenshot of part of Google Maps use JavaScript

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

Upvotes: 10

Views: 41450

Answers (1)

rogal111
rogal111

Reputation: 5933

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

Upvotes: 22

Related Questions