CODEWITHSUNDEEP
javascriptjqueryimagegoogle-mapsgoogle-maps-api-3
Owen
Owen

Reputation: 4397

Convert Google Map to static image for download using jQuery

I have a div on my website in which I have created a GoogleMap. I've added markers and implemented MarkerClusterer.

I want to allow the user to click a button and download an image of the currently viewed map as they see it after any zooming or moving including markers:

enter image description here

I tried to use html2canvas and that doesn't work at all.

After searching for how to do this for the last hour, I've come up with absolutely nothing useful.

Is this even possible to capture the div as the user sees it? Or is creating a static google map and saving the image the only way to do this?

SOLUTION

I went with PhantomJS in the end. I created a Map view which takes input through the querystring and uses that data to add markers to a map. I then used PhantomJS to take screenshots from the map view. I then output the screenshot image as a Base64 string.

Upvotes: 1

Views: 3859

Answers (2)

MRDJR97
MRDJR97

Reputation: 879

Your best solution is Static Google Maps.

See https://developers.google.com/maps/documentation/static-maps/intro for plenty of examples.

Create an image in your div, I would then recommend using concatenation to produce a dynamic url from your marker/LatLng/Polyline etc variables. Then use JS to set the image's src equal to that url.

Following that, there are plenty of JS libraries that will allow the user to download the image.

Upvotes: 1

jsjunkie
jsjunkie

Reputation: 559

SnapshotControl is suggested by google in such situations. The limitation is that SnapshotControl supports only URL of upto 2048 characters. So it can be used if there are not much layers drawn on map. For phantom js, when user clicks on download, the layer data drawn on map should be send to server (through say downloadServlet). This data will be passed to a JSP that can render a map and plot point. Phantomjs will be executed by downloadServlet passing the URL of this jsp.

I have used phantomjs in my application as I draw around 4-5 different layers at a time. Only thing to note here is that the server where phantomjs would be executed needs to have internet connectivity otherwise maps will not be drawn.

Upvotes: 1

Related Questions