CODEWITHSUNDEEP
javascriptc#csshtmlgoogle-maps
DInesh AG
DInesh AG

Reputation: 316

How to convert Google maps div to image using javascript

I need to send HTML email to customer which contains Google maps (with directions) using java script or c# Example: Uber Call taxi sends to customer invoice with google maps as html mail Uber Html Invoice with google maps

Upvotes: 2

Views: 1922

Answers (3)

Martin
Martin

Reputation: 1966

There's a way to use the static API and add in an additional encoded polyline.

Example url here results in the following image:

Example image

Basically you have to generate a dynamic JS map and parse the result looking for a tag called "overview_polyline". This field is then sent in to the static map generator to add the line on top of the map.

Source: https://stackoverflow.com/a/23937276/1581477

More info on polylines: https://developers.google.com/maps/documentation/utilities/polylineutility

Upvotes: 0

TejSoft
TejSoft

Reputation: 3315

You can use the screen capture feature of PhantomJs to capture html page and save it as .jpg or .png image on a server. Then you can include the image in your invoice that you send out to users. PhantomJs commands can be saved as a .bat file and triggered via C# code.

Upvotes: 0

Rob Gates
Rob Gates

Reputation: 275

You can use Google Static Maps: https://developers.google.com/maps/documentation/static-maps/

An example would be something like this:

<img src="http://maps.googleapis.com/maps/api/staticmap?size=800x600&maptype=hybrid&scale=2&format=png8&sensor=false&path=geodesic%3Atrue%7C-6.9325%2C+37.3916666666667%7C-6.9325%2C+37.3933333333333%7C-6.93388888888889%2C+37.3933333333333%7C-6.93388888888889%2C+37.3916666666667%7C-6.9325%2C+37.3916666666667&zoom=10" width="800" height="600"/>

Upvotes: 1

Related Questions