APIs (function) work on local, but not after deployment

Support
, ,
1

Hi Support-

I have an issue with the Google Maps API and Geolocation API on a personal project in Netlify. Here’s the hosted project: https://nps-finder.com. It’s a mapping platform that begins with finding the user’s location on Google Maps.

The issue is when I reverse geo — meaning, after deployment, a function fails to provide the data that shows the user’s current address in the project. You can see the blank white window in the top-left corner of the app:

image

It’s odd because both APIs still seem to be working… as the map is able to appear and the user’s location via marker appears on the map as well. And when I attempt to run this project locally, everything works without an issue.

Here is the repository on GitHub: https://github.com/seanberry89/nps-finder. Any idea of what I can do to resolve this would be appreciated.

Thanks!
Sean

2

Hi @sberry :wave:t6: , welcome to the forums! Glad you found us.

Did you check to make sure your API requests were not blocked by CORS restrictions?

When I inspect your page I see this error

Screenshot 2023-06-30 at 8.29.45 PM
Screenshot 2023-06-30 at 8.29.45 PM1032×220 27.8 KB

3

@SamO Apologies for the late response. I’ve been reviewing CORS restrictions and Google Maps API via Google / StackOverflow to determine if this is a common issue with the API or not. I did find a few helpful posts, but nothing substantial to assist me with resolving the issue.

However, I did find an answer. I noticed that the Google Maps API does work with Netlify when I manually deploy the app versus link the GitHub repository for continuous deployment. Although I wanted this app to be linked to GitHub and deployed continuously, alongside the others, I’ll take the loss and have the app working 100% via manual deployment.

Thanks anyway!

4

AHHH I see sorry you can’t utilise continous deployment. glad you found a workaround though.