Trying to enter From and To addresses, geocode them, and display on a Google Map

Hi - I’m a new member and thought I was undertaking something really easy. I’ve created two multi-line input fields (to hold the From and To addresses) and a Google Map (yes, I believe I have my token correct). I just don’t know how to take these boxes of text and treat them as addresses so that they can be geocoded and displayed on a map. Thanks for whatever help you can provide!

Hi david26

I might be incorrect, however I believe that only single input value can be formatted as address without a workflow:

also take a look at this plugin > it might helps

Thanks, @edward.w.douglas. I took your advice, created a standard input field, and gave it an ‘Address’ format. I also installed the Geocoding plug-in.

I then created a ‘Geocode’ button, which I thought would enable me to create a workflow allowing me to geocode the address typed into the input field. …but I don’t know how to do this. Please advise. Thanks!

It would help if you could explain what is it that you are trying to achieve and possibly provide me with an editor link.

The plugin generates an API call

for example:

I appreciate the offer @edward.w.douglas. I’m not quite sure how to provide you with an editor link. I modified permissions so that anyone can edit my dashboard - https://bubble.io/page?name=index&id=da-dashboard1&tab=tabs-1. If this isn’t sufficient, please let me know.

Here’s what I’m trying to accomplish:

  1. Enter two addresses (From and To), geocode them and display them on a map
  2. Get directions from the From address to the To address
  3. Using the Uber plug-in, provide the length of time it will take a car to arrive at the ‘From’ address.
  4. Using the Uber plug-in, provide the cost to travel from the From address to the To address

Thanks again!

Hi again. I have taken a look and it seems like you would need to develop everything. I thought your app was almost done or similar and you got stuck in something.

I found this link

Maybe this is something that you would like to get involved in.

There are also several templates. For example:

https://uber-clone.bubbleapps.io/ built by https://zeroqode.com/

Many thanks, @edward.w.douglas for your help. I hope I didn’t mislead you - I’m really just getting started and figured the best way to learn was to start small - by geocoding a couple of addresses and putting them on a map. Perhaps I’ve bitten off more than I can chew…

1 Like

You don’t necessarily need to geocode an address to show it on the map but for what you need, unfortunatelly I am unable to assist as I would need to develop complete workflows for you. However there are many free resources on youtube or here where you could find useful info. I’m sorry that I was not able to assist. Maybe someone else will chip in :slight_smile:

Is there a reason you aren’t using the Search Box element?

You might also consider working through the lessons. The one called “Saving data” walks you through saving locations on a map.

Appreciate the help, @edward.w.douglas. If I ever develop your expertise, I’ll pay it forward!

Thanks for the direction, @sudsy. I had gone through the tutorials before and promptly forgot what I’d learned. I took your advice and am now able to see markers on a map. Progress!

1 Like

I’ve added the element for him earlier @sudsy :slight_smile: I’m sure you will be able to figure it out @david26 ! Key point is not to give up! And I’m far far from being an expert :slight_smile:

1 Like

@david26 If you are interested in converting coordinates to address or vice versa here is how to do it. It also explains how to save the values.

1 Like

I also found an example that helps you get started. In the below example you will need yo use Google maps HTML code and add your API key, from and to address.

Thanks for all your help, @edward.w.douglas and @sudsy. I’ve made some decent progress. I swapped out the Google Map plug-in for the Google Map Extended plug-in and am now happily placing my points on a map with directions between them.

I’m frustrated, however, that I feel like I’m groping in the dark. For example, I’m trying to display a nicely formatted set of text directions next to the mapped route and haven’t been able to figure it out. Unfortunately, the plug-in I’m using introduces a bunch of things, but it’s not clear to me how to best use them.

It feels to me like a significant limitation in these no-code environments that without looking at the code, it’s hard to figure out what’s going on. I was able to make some progress by looking at the Google API and also examining some of the data during interactive debugging. Is this a newbie problem or is this something that you struggle with also?

Google maps API is expensive. If you have map heavy app and find success you will be in for a real disappointment to find your ‘profits’ going into googles pockets. The cost of showing a map 1,000 times is $5…imagine having a successful app with 100,000 monthly visitors, who each see a map…that is $500, then if you are geocoding, double it, and if you are geocoding for two address, again add $500…so $1500 a month to show a map with two geocoded address from coordinates.

You could use the leafy map plugin.

It uses coordinates to show the map marker.

You can also use one input to get the coordinates into the system by adding the entire coordinates string and using extract with regex to separate the latitude and longitude.



Using this method you won’t get the actual address value, but at least can show a map with markers and draw a route and then probably utilize the uber plugin for the time estimates ( I’m not familiar with Uber app ).

If you are expecting repeat users, you can geocode their coordinates and save them for future use so you can get the actual address value and only hit the google api once for it. Probably set up ‘favorite destinations’ so they can store multiple locations they travel to and from frequently.

And for the search box, using the google places API is expensive as well.

Try the Algolia places search by zeroqode

Instead of paying google $283 for the first 100,000 searches, you pay nothing to Algolia. Then for every 1,000 after that its only $0.40 for Algolia compared to google $2.27.

Algolia places provides some good data like zip codes, county etc. that you can use for search results if you are inclined to do distance based results for locations or listings of some kind. I am letting a user search a city, I grab the zip code list and set my search to show ‘things’ that have a zip code in that list.

When result is not available for that, I let them expand their search by using the county…last ditch is to set up a distance based by using google geocoding API. Of course, when getting a new ‘thing’ into the database I am having to use the google api to get the geographic address, but in search for the most part google is no longer in my pocket.

4 Likes

Hi @boston85719 what’s the best and cheapest way to find distance between two coordinates in Km or Miles? Coordinates being in longitude and latitude.

Somebody mentioned they use a plugin called ultimate toolkit which apparently has a function to do a distance between two addresses without an API

I need to find distance between two coordinates not address. All address have coordinates but not all coordinates have address. I am trying out math,js. Thanks for your help.

If you have not had a chance to use the toolkit plugin, I recommend giving it a shot. The distance functionality works and it doesn’t use an API.

Set up a workflow like so

On page you have a RG with datasource set to

Screen Shot 2020-11-10 at 11.11.17 PM

Then to display the information regarding the thing you are showing use a do search for and constrain using the UID

Screen Shot 2020-11-10 at 11.12.21 PM

1 Like