Templates Plugins Courses

Setting up Google API for Geocode and map

Templates
#1

Greetings,

I purchased the HomeBNB template to jumpstart my app and to learn bubble. I have 2 problems that I could use help with.

  1. I have set up the API’s in google for location searching, but the search is not working when I go to add a new room. I remove the API’s and the search works again. I am not sure why the API’s are not “taking”.

  2. When I test the HomeBNB template to add a home, I get a red indicator and the next button is not active. The address is there, but I am not able to move forward in the “wizard”.

With Kind Regards
Ray

#2

Hello, @raynellbell. Thanks for reaching out.

That may happen because of a few reasons:

  1. you have set your API keys incorrectly.
    Perhaps you have indicated the same keys into the Google Geocode API key and Google Map API key fields (according to the Bubble Manuals, your Client API key should go to the Google Map API key field and the Server API key should go to Google Geocode API key - https://prnt.sc/vzyvnh)
  2. your keys are set correctly, but you messed up with Redirect URLs.
  3. your keys and redirect URLs are OK, but you have not connected your Google app with billing.
    The app you create in the Google Dev Console may require a connection with your billing info - https://prnt.sc/vzyxbr. And once you do not do that - your attempts to use the Google Maps APIs will be failed.

To make sure what exact reason is beneath your trouble I can recommend you re-check your Google Dev Console app, API keys, and redirect URLs. Then preview the app with an enabled browser console and see what kind of error will be recorded once you try to type some geo address into the search field. You should see something like this:

image
image1919×965 90.6 KB

https://console.cloud.google.com/project/_/billing/enable
https://developers.google.com/maps/documentation/javascript/get-api-key

Yes, this is expected behaviour, when your Google API keys are not set. The autocomplete will work, but your input won’t be recognized as the correct one until you setup your keys. Unfortunately, this is a recent Google policy update that not us, not Bubble can influence.

But at least, the usage of Google Maps APIs has 90 days the trial period:
https://cloud.google.com/billing/docs/how-to/manage-billing-account?_ga=2.53726504.-1621638896.1605545023&_gac=1.47722965.1607428345.Cj0KCQiA5bz-BRD-ARIsABjT4nh6GQ3KYdupsIXv9CHkRYJ8LHadDlE1HAb6IxxmdmNtBe6kHjp5huIaAjgbEALw_wcB

I hope this information will be useful to you.
Take care. :slightly_smiling_face:

#3

Greetings!

It turns out that I hadn’t connected the new API to my account (thought that was automatic) but now I know to make this check first moving forward.

You all are great and thank you for the template. I wanted you guys to build my app for me, but I now feel I can do it!

Ray

1 Like
#4

Hello,
I purchased the Ridely - Ride Sharing like Uber template and I have some troubles with Google service using Map
However, I installed the list of APIs (Geolocation API, Maps SDK for Android API, Roads API, Places API, Maps JavaScript API, Maps Embed API, Time Zone API, Distance Matrix API, Maps SDK for iOS API, Maps Elevation API , Directions API, Maps Static API, Geocoding API, Street View Static API)
But when I enter the departure and destination address, the distance and duration are not calculated.
Is there another configuration to make?
Thanks
problem

#5

Hello, @nijuste.
Thanks for reaching out. Apologies for the late reply.

To help me better understand what could cause your problem, can you please share the browser console screenshot, when the Ride info popup is loaded? Like this:

image
image1896×1026 272 KB

Thank you.

#6

@nijuste,

We have updated the Ridely template - we fixed the route calculation logic and now when the user indicates the starting/ending route points, the map below will display the distance + trip cost correctly.

Please create a new app using the template as a base, and check it out.

Take care. :slightly_smiling_face:

#7

Hello,
Thanks for the fixes, I tested them and it works. I still have other anomalies with the login / logout system.
For the login, if I try to login with an account that does not exist, I am redirecting to the signup page, but the problem, if I try to return to the login page the login button does not respond, it is like inactive.

The second anomaly is at the logout level. If I am connected, and that I disconnect, instead of being redirected to the login page, I stay on the same page (which is not supposed to be accessible when we are disconnected), and the login button is not accessible to reconnect.
I saved these 2 gif images to help you understand what I am saying.

Login_problem
Login_problem1366×768 1.19 MB
Logout_problem_
Logout_problem_1366×768 3.21 MB

Thank you

#8

@nijuste, apologies for the delayed reply :pray:

Thanks for letting me know! I understand the issues you have reported. We will check this moment with the dev team. :pray:

Regards,

#9

Hi @kate ,
Are the fixes in progress? I also have a question since I am not used to using Bubble. Is it possible to update the template in my existing project or do I absolutely have to create a new application and start from scratch?
Thank you

#10

@nijuste, hi.

Yes, the fixes are in progress and I hope to inform you about the new plugin update on Monday :slightly_smiling_face:

No, unfortunately, Bubble does not allow this. You need to create a new template copy in order to see the changes.

Regards,