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 - Screenshot by Lightshot)
  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 - Screenshot by Lightshot. 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

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:

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 Logout_problem_

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 template 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,

#11

Hi @kate hope all good with you, I am having the same issue and doubled check all the notice you provided, but still not sure why my app (Ridely) is not calculating the distance and the cost. Thanks for your help :slight_smile:

4Untitled
4Untitled1920×1080 260 KB

#12

@mohd,

Hello and thanks fr reaching out.
The issue with the route calculation was fixed in the last template update. In order to see the changes, you need to create a new app and use the Ridely template as a base (Start with template drop-down).

Unfortunately, there is no other way to see the template updates. Apologies for the inconvenience.

Have a good day. :slightly_smiling_face:

#13

@kate
Thanks for your reply.
I saw that note in regards the updates while reading the comments here so I assumed this is not the issue in my case. Any way, although I bought this template on 24th Jan, after you have released an update (so I believe I am using the updated one), I have just created a brand new app (now) but still having the same issue. Thanks.

P.S. Just for the future reference, so when you have any updates isn’t it possible to point the changes within workflow, date etc. so we can just modify and update the app without creating new one.

5Untitled
5Untitled3840×1080 453 KB

#14

@mohd,

If you are just created a new app and trying to test this functionality - I’m afraid it won’t work. You need first set up your Google Maps API keys (in your Settings>General tab). If you set the keys correctly, the route calculation functionality should be up and running, just as on the template demo page.

This is a requirement dictated not from the template side. The details you can find here:
https://manual.bubble.io/working-with-data/setting-up-google-api-keys

Google Geocode API not working - Question - Bubble Forum

Thanks for the feedback! Unfortunately, it is not an option for us. In this case, we will have to create a detailed guide with explanations for each template fix or update. I’m sorry for the inconvenience, but the only way to check the template update - is by creating a new template copy (you can check changes there and copy them to your already existing app).

Thank you. I hope it helps. :pray:

#15

If you are just created a new app and trying to test this functionality - I’m afraid it won’t work. You need first set up your Google Maps API keys (in your Settings>General tab). If you set the keys correctly, the route calculation functionality should be up and running, just as on the template demo page.
Notes: I am on a paid plan with

This is a requirement dictated not from the template side. The details you can find here:
https://manual.bubble.io/working-with-data/setting-up-google-api-keys

Thanks for your prompt response, Yes of course I have updated the Google Maps API keys and added the new app’s URL to API Client as well in my Google Cloud Platform.

Thanks for the feedback! Unfortunately, it is not an option for us. In this case, we will have to create a detailed guide with explanations for each template fix or update. I’m sorry for the inconvenience, but the only way to check the template update - is by creating a new template copy (you can check changes there and copy them to your already existing app).
Thanks yes that’s what I was trying to do any way :slight_smile:

#16

Ok problem solved, The Google Map Extended plugin was not getting the value so I had to update (fill) the API elements within the plugin manually.

1 Like
#17

@mohd,

That’s great! I hope my assistance was useful for you. :slightly_smiling_face:

Have a good day.

#18

Hi ,

For riders using this app , when indicating “pickup point” does the app suggest current location or will they have to put in the address ?

#19

Hi, @maurosaldana3.
Sorry for the late reply :pray:

Rider can use his current location and type his pickup address manually, so there are two options:

image
image1064×1024 48.5 KB

Hope it helps. :slightly_smiling_face: