Workflow error - Error hitting Google Geocode API: API keys with referer restrictions cannot be used with this API

I set up Google API’s to get geographic addresses and maps.
It’s a single-page mobile app, so in index page, I have multiple tabs that I switch around using custom states.

There are several tabs where I take geographic addresses in SearchBoxes to save the addresses. A really strange thing happening is this “Workflow error - Error hitting Google Geocode API: API keys with referer restrictions cannot be used with this API” occurs only in one tab’s searchbox and I cannot save the address to the database.

I’ve been struggling for hours why I can’t save the address data, and finally checked logs to find this error.

Anyone here to help me with this?

In the workflow setting, when I hit the address box, I also get the below popup. Are they inter-related?

Thanks.

@mikeloc Hi my savior^^, can you happen to help me with this? I am still unable to figure out how to handle this.
Thanks, John

Sorry, @yj.johnrhee… I don’t think I can be much help on this one. I did see this thread, though, and it talks about the same error. Have you come across that thread? If you haven’t, it probably wouldn’t hurt to check it out.

Best…
Mike

1 Like

Hi @mikeloc. Sorry to bother you. Yes, I stumbled upon the post as well but couldn’t digest. Thanks anyway for support^^.

Best wishes,
John

1 Like

You will need to check the restriction your put on your api key in Google Cloud Console.

1 Like

Hi @Jici
I already checked it and everything’s fine. I have several address inputs and I have a problem only in one input while others still work fine.

Thanks anyway.

Try to delete the input and add a new one. Sometimes it can help fix some issue like that.
Are other input on the same page?

I also tried it a few times. Yes, it’s a single-page app so they are all in the same page.

If you have a test page we can test, maybe someone can take a look and help you for this strange issue.

@Jici
Do you mean editor or URL? Problem is it’s all in the Korean language, so… I don’t know how I can let someone take a look into it.

haha, it may not be easy!
In your screenshot, you show a flow and not an input. Do you see this error message in editor?

Yes, when I click the expression input area and start typing, no dropdown with possible options show up and instead this alert pops up - not all the time though.
I copied the expression from other address input that’s working, I can paste it in but no address is saved, and sometime it ends up with some US address.

I am still testing other address inputs by changing values, and it works. I switched from search box to input and stored address in address format to find that the address I input is converted to Google address format. I just cannot save geographical address using SearchBox.

Searching in address field doesn’t work well because Bubble keep the typed text like it is an address. It,s better to not search and scroll down to select the correct value (and when you have a one page app… it’s can get complicated. Cheat: use a text field, set the value you want there by searching, and copy paste in the address field).

When you call the Geocode API, it may call it from server side while in the searchbox, the call may be on client side. this may be why you receive the error message for the referer. Try to remove the referer in Google Cloud console and check if this work.

I have no restriction on server API while keeping it to http referrers on client API. So, do you mean I should try removing the restriction on the client as well?

Yes. you should try to remove it so you will be able to see if the problem is from Bubble side or settings in Google Cloud Console

Hi @Jici again,

It does not make any difference. Is this something that I need to report for bug?

Yes I think you should send a support request

1 Like

Thank you @Jici for all the help with your valuable time. I most appreciate it.

1 Like

Hi @Jici @mikeloc
I reported a bug to Bubble and received the following reply.

Saying…
We are sending this email to let you know that your application Koreafy is being rate-limited because of a high number of Google Map loads. This means that some users will be unable to see the map elements on your pages.

You should add your own Google Map API key in the Editor to remove this limitation to avoid issues and for a better user experience (see this to generate a free Google key).

I have set up all 5 Google API’s at server side according to the Bubble instruction, and they are talking about Google Map API, which I am confused about. Is this additional API that I need? The API’s I recreated at the Google console as below for my custom domain.

By the doc, I am supposed to copy and paste Client key at Google Maps API and Server key at Google Geocode API at Bubble settings, right? What do I do with Maps API key if that’s what Bubble team is talking about?

Could you help?
Thanks.

I had had the same problem. I removed all the restrictions, then later I put them back.