About Zapier Community
New to our Community? Get to know more about our space and how to make the most of your time here.

Code of Conduct Community FAQ's Zapier Common Questions What to Expect

Get Started With Zapier
New to Zapier? We have got you covered with our Zapier 101 Resources.

Zapier Essentials

Get Support
Have a question? Let's get you an answer!

How Do I...? Troubleshooting Code & Webhooks Developer Zone

Other Help Resources
Wait, there's more! Check out these Community sourced spaces for additional resources.

Zapier Help Center Hire an Expert

Zapier Products
Learn more about Zapier's new products.

Zapier Tables Zapier Interfaces

Zapier Reading
All of our best learning resources can be found here.

Featured Articles Show & Tell AI Hub Zapier Tools Hub

Learning Groups
Excited to meet other builders? Check out our interest areas full of doers, dreamers, and in-betweeners.

User Groups

Other Learning Resources
Some of our favorite additional ways to upskill your Zapier knowledge.

Zapier Learn Zapier Blog Zapier Webinars

Product Updates
Check out what is new and upcoming with Zapier with our regular product updates.

Product Updates

Early Access Program
Want to join Early Access? Learn more here.

Best answer

Image from web for follow up steps

  • 3 October 2023
  • 9 replies
  • 202 views
M

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!

icon

Best answer by Todd Harper 3 October 2023, 19:04

View original
This post has been closed for comments. Please create a new post if you need help or have a question about this topic.

9 replies

Troy Tessalone
Userlevel 7
Badge +14

Hi @MichaelG 

Good question.

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

⚡ Troy Tessalone - AutomationAce.com | Premier Certified Zapier Expert | #1 Zapier Community Contributor
Todd Harper
Userlevel 6
Badge +8

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 :)

M

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?

Troy Tessalone
Userlevel 7
Badge +14

@MichaelG 

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

⚡ Troy Tessalone - AutomationAce.com | Premier Certified Zapier Expert | #1 Zapier Community Contributor
M

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. 

Todd Harper
Userlevel 6
Badge +8

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:

 

Todd Harper
Userlevel 6
Badge +8

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.

M

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

L

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).

Terms & Conditions