DEV Community

IT Solutionist, Specialist
IT Solutionist, Specialist

Posted on • Updated on

How to convert a image from Google Map(Div)?

Hello. Thanks for reading my article in advance.
As you can see above picture, I have displayed a map using Google Map API.
I want to convert a image from that google map using JavaScript.
Who is Someone expert in this part?
Let's discuss in a detail.
I have got a solution.
We can use html2canvas library.

html2canvas(document.getElementById("[your map id]"), {
    useCORS: true,
}).then(function(canvas) {
    var img = canvas.toDataURL("image/jpeg");
    var image = new Image();
    image.src = img;
    document.getElementById("[div to display an image]").appendChild(image);
Enter fullscreen mode Exit fullscreen mode

It just displays the google map as an image.

Discussion (3)

aarone4 profile image
Aaron Reese

Use stack overflow if you need help. Use DEV to demonstrate the solution when you have one

it718 profile image
IT Solutionist, Specialist Author

Hello, Aaron. Thanks for your messaging.

aarone4 profile image
Aaron Reese

Nice. I'll be using that.