How to take screenshot of a Google map using JavaScript or jQuery?

Question

I want to take a 'screenshot' of a google map in my html file using JavaScript.

The map is currently loading in div tags, so I am not able to get image using this <div> tag.

But if I can load it in canvas <canvas> then I can take a screenshot of it very easily, can anybody tell me solution for this problem - that is, how can I load a google map in canvas.

Or is there any alternative solution for this?

possible duplicate of [How to take the screenshot of part of Google Maps use JavaScript](http://stackoverflow.com/questions/11590620/how-to-take-the-screenshot-of-part-of-google-maps-use-javascript) — Álvaro González, Jul 26 '13 at 10:14
Were you able to take screenshot using HTML2canvas of a map? if so, please tell how did you do it. — Faizan, Jan 15 '15 at 15:32

Dziad Borowy · Answer 1 · 2021-12-06T12:05:56.640

5

Why not just use google maps image api?

edited Dec 06 '21 at 12:05

answered Jul 26 '13 at 09:50

Dziad Borowy

12,045
4
38
51

You're right but I don't have fixed latitude and longitude, place can be changed by user any time so I need to use it. – Jayeshkumar Sojitra Jul 26 '13 at 10:01
if user changes the place - you can always retrieve coordinates from the map itself – Dziad Borowy Jul 26 '13 at 10:05
Sorry, I am not aware about it, can you please suggest me any thing regarding this? – Jayeshkumar Sojitra Jul 26 '13 at 10:16
have a look at [gmaps](https://github.com/HPNeo/gmaps) library and specifically - [this example](http://hpneo.github.io/gmaps/examples/geocoding.html) - it shows you how to get coordinates from address – Dziad Borowy Jul 26 '13 at 10:23
2

This is the easiest way to do it. E.g: https://maps.googleapis.com/maps/api/staticmap?zoom=18&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C42.65655554361449,21.165063181948653 – Shpat Jun 24 '15 at 14:49
1

@Shpat Your link refference throw an error, this might help https://developers.google.com/maps/documentation/maps-static/overview – Fernando Torres Dec 05 '21 at 23:33
Thanks @FernandoTorres, updated the link. – Dziad Borowy Dec 06 '21 at 12:06

score 0 · Accepted Answer · edited May 23 '17 at 10:29

0

You can try using one of those scripts:

html2canvas http://html2canvas.hertzen.com/
jsFeedback http://experiments.hertzen.com/jsfeedback/

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

edited May 23 '17 at 10:29

Community

1
1

answered Jul 26 '13 at 09:37

Kenjin

136
1
4

How to take screenshot of a Google map using JavaScript or jQuery?

2 Answers2