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

david26 · 2020-06-03T17:44:00.983Z

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!

edward.w.douglas · 2020-06-03T19:36:59.629Z

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:

image1069×457 82.2 KB

david26 · 2020-06-03T21:32:09.667Z

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:

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

Thanks again!

edward.w.douglas · 2020-06-04T07:40:34.202Z

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

makerpad.co

Makerpad Tutorial - Uber clone with Bubble

Uber clone with Bubble

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/

david26 · 2020-06-04T13:43:19.869Z

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…

edward.w.douglas · 2020-06-04T13:48:27.040Z

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

sudsy · 2020-06-04T14:00:38.809Z

david26:

I’ve created two multi-line input fields (to hold the From and To addresses)

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

search-box1636×688 29 KB

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

david26 · 2020-06-04T20:21:15.033Z

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

david26 · 2020-06-04T20:23:00.125Z

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!

edward.w.douglas · 2020-06-04T20:34:34.589Z

I’ve added the element for him earlier @sudsy 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

edward.w.douglas · 2020-06-05T05:50:32.037Z

@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.

edward.w.douglas · 2020-06-05T05:57:10.989Z

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.

Display directions from one inputed location to another inputed location on the map?

<iframe width="300" height="350" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/directions?key=<your google maps key>&origin=<bubble's origin's formatted address>&destination=<bubble destination formatted address>"> </iframe> [image] [image]

david26 · 2020-06-15T17:38:04.016Z

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?

boston85719 · 2020-06-15T18:56:14.573Z

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.

Leafy Maps

(new free plugin) Plugins

I’m happy to present a new flexible and powerful map plugin for Bubble! It’s made of a map engine called Leaflet that coordinates everything and the ability to get maps from different providers, right now they’re Mapbox, Stadia and Openweather (provides an overlay to the maps). The map engine is free to use, both in price and in license and the map providers have generous free tiers. Choose one or more! Check them out and make sure you grab an API key from each and also enable your domain wit…

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.

Screen Shot 2020-06-16 at 1.51.42 AM695×273 24.7 KB

Screen Shot 2020-06-16 at 1.51.57 AM1025×410 34.5 KB

Screen Shot 2020-06-16 at 1.52.07 AM1017×458 38.1 KB

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

Algolia Places - New Plugin from Zeroqode Showcase

[algolia%20places] Algolia Places provides a fast, distributed and easy way to use address search autocomplete JavaScript library on your website. It has been designed to improve the user experience of your forms. It harnesses OpenStreetMap’s impressive open source database of worldwide places. [algolia%20places] For details, screenshots and demos please visit the plugin page: at | Zeroqode Levon Terteryan Founder @ Zeroqode [zeroqode-for-web-160x120] Bubble Templates Bubble Plugins Bu…

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.

hrizvi2000 · 2020-11-04T17:04:26.972Z

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.

boston85719 · 2020-11-04T17:49:14.050Z

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

hrizvi2000 · 2020-11-04T21:33:46.461Z

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.

boston85719 · 2020-11-10T16:12:41.100Z

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

Screen Shot 2020-11-10 at 11.10.19 PM1153×338 29.5 KB

Screen Shot 2020-11-10 at 11.10.08 PM1178×765 61.3 KB

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

alon1122 · 2021-01-25T07:31:04.556Z

Hello,
I am a newbie, and was also looking to present a location on a map, this thread was great for a starting point.
I am still not sure if I need to save the address into the database in order to show it an a map, or can use the text fields to generate a marker.
Any help will be great.

halindra · 2021-03-13T00:02:56.792Z

how did you make both “to latitude field” and “to longitude field” appear?

EDIT: Nevermind, I figured it out. The Thing has to have 2 number fields