Skip to main content

Hello,

 

We are trying to automate a process we used to do manually. We used to manually take a screenshot of the customer’s house and include it on a proposal by adding the screenshot manually.

 

I want to automate the step by calling the Google maps static api and “downloading” the image with a webhook get, that the api returns and use the image later on the pdf generator or dropbox.

We have the google api working and when I manually call the url, the image returned is correct. 

When using the same URL in combination with the webhook get step I receive

“hydrate|||.eJwtjsEOgjAQRP9lzxBBkLbevOnNmwdjmlK2pgFaQksMIfy7C-H6ZvJmFtDeRXRRxnlAuMIDErAuROU0StsQeWF99769PbdITyH6fgo47uGZMS4uIgGltZ_IckBRcoLGYtdIp_pNbGyHgQztT43fANdlJ3LwlvZHAu8FWpypGYpTgU2eZVylRW1UWjJWpbXORCrysuJMKJPXJbkONb2NVvdqgPWzrn-A-kNa:1qnbvq:S9ggH0kMBh0o7C5CRa7HsU5HXLg|||hydrate”

I later try to upload the file to dropbox and it generates a rather useless empty file called static map.unknown

 

  1. Is the above process even the right approach or should I be looking for another solution?
  2. If the above is generally possible, where am I going wrong?

 

Many thanks in advance!

Hi @MichaelG 

Good question.

Please post screenshots with how your Zap steps are configured in order for us to have enough context.


I would use JS in Code by Zapier for this instead of Webhooks by Zapier. All you really need to do is build your request URL and that should essentially be treated as a direct image link when adding to other Zapier integrations.

output = {map: ''};

const baseUrl = 'https://maps.googleapis.com/maps/api/staticmap?';
let appData = '';

const params = {
center: inputData.address, // BE SURE TO ADD THE ADDRESS TO YOUR INPUT DATA WITH address AS THE KEY
zoom: 15,
size: '600x300',
maptype: 'roadmap',
key: inputData.googleMapsApiKey // BE SURE TO ADD YOUR API KEY TO YOUR INPUT DATA WITH googleMapsApiKey AS THE KEY
}

const queryString = new URLSearchParams(params).toString();

output.map = baseUrl + queryString;

This will output the URL, which you can then use in subsequent steps :)


Many thanks for your time Todd, I followed your steps and I do get the image returned by the google maps api.

My second step however is to try save the google api image to dropbox which it does not allow with the url. I assume it needs an actual file instead?


@MichaelG 

We would need to see screenshots with how your Zap steps are configured to have enough context.


Thank you Todd and Troy, the problem is solved, I have added Todd’s step above and instead of saving the image and reusing it later, I use it straight from the URL to prepare the proposal which works! It also saves cluttering up another folder. 


Hi @MichaelG,

Here is an example of what your Dropbox step should look like. Be sure you are including the Map from the code step in the “File” field, and then specifying “.png” as the file extension:

 


Ah! Nevermind. Just saw your last comment that you’ll bypass the Dropbox step altogether. Anyway, if you did want to add it back into your workflow, that’s how you would do it.


Perfect thanks, good to know anyway. I have tested it and yes, the issue was down to the extension. 


Hi @MichaelG,

Here is an example of what your Dropbox step should look like. Be sure you are including the Map from the code step in the “File” field, and then specifying “.png” as the file extension: pajamas with shelf bra

 

Regarding the issue with generating an empty file named "static map.unknown" when uploading to Dropbox, it might be related to how the image data is processed or saved. Verify that the data received from the Google Maps API is being correctly saved and uploaded to Dropbox in a compatible format (e.g., image file formats like JPEG or PNG).