Cómo tomar la captura de pantalla de una parte de Google Maps use JavaScript

Question

En mi página, hay un contenedor que utiliza Google Maps API para mostrar un mapa, hay un botón debajo de él, el usuario puede arrastrar el mapa a una posición, luego haga clic en el botón, me gustaría tomar la captura de pantalla del mapa que se muestra en el contenedor ahora y mostrarlo en un lienzo. ¿Es posible hacer esto con JavaScript puro?

sólo tiene que apoyar Chrome

Answer 1

Será difícil de hacer sin el apoyo del navegador. Pero se puede usar Google Static Maps API: https://developers.google.com/maps/documentation/staticmaps/

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

---

Hay algunos proyectos para dibujar DOM HTML al lienzo:

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

También puede integrar Javascript con un poco de solución de servidor (usando WebKit), por ejemplo phantomjs

código de ejemplo: (leer más 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(); 
}); 

---

Si necesita una solución única de cromo para la específica rango de usuarios puede escribir su propia extensión de cromo para hacer esto: Taking screenshot using javascript for chrome extensions