Link geographic address field to google map

[irotsenmar]

Hi -
I am trying to link a physical address text field to google map but bubble does not recognize it. See screenshot below. It treats it as a text field. As I user, I want to click on address field so I can see the address on a google map. Any ideas?

Much appreciated!

[jcindy81]

Hello! You’ll need to make the data field in your data type “geographic address” rather than text. That should let Google maps recognize it.

[irotsenmar]

Hi -
I’ve had the data field as “geographic address”. Not sure why bubble still treats it as a plain text field.

[jcindy81]

Hmm. Hard to say without seeing the setup. Are you pushing this data type to a map element when the user clicks the address?

Like:
User clicks address
Address data is sent to a group hosting the map element.
-display data in group “map”
-map source is parent groups “location”
-address source is (your data field here)

[dan1]

Can you post a link to your editor here (or share in a private message)? Hard to see the specific issue from what you’ve shared.

Is it your intent for a) the “More Info” to open up Google Maps or b) to display the address of the selected place on an actual Google Map?

[irotsenmar]

Hi Dan -
My intent is (b)
I am trying to have user click on physical address field so it will open up that address on an actual Google Map. The address below studio name is grayed out for some reason.

here is a link to my editor.

Bubble Editor - creativebird

Thanks

[irotsenmar]

Hi -
Is there a way to remove country from the address field?

Thanks,

[dan1]

@irotsenmar - a couple of things.

• With your data types, while you can use the “text” type for an address, it’s much better to use the type “geographic address” when working with addresses. (As far as I see, you’re only using text based types in your data types)
• For navigating to an external Google maps page, you need to be working with the data type of “geographic address”. If you create this as a link (ie. draw a link on the page, which is set to link to an external site, then you can reference current cell’s thing’s address - then you’ll see the added option to select “link to Google Maps”
• For displaying on a map within your application, once you use the field type of geographic address, you can create a workflow to “Display markers on a map” (or “Set current map marker” if a list is already displayed). Just remember that you need to draw a map somewhere on the page first (in a popup, on the page itself…just somewhere. Then you’ll have the ability to build out those workflows (without a map element on the page, they will not show up as options in your workflow builder).
• You cannot remove country from the default view of an address. But you can manually structure an address to display in a specific way by using the :extract function.

[irotsenmar]

Hey Dan -
Thank you for your help. Your suggestion worked!

Two other things I am having issues with.

1. I tried to use extract function to remove USA but this is as far I can get. Bubble gives me email component
   

   

2. I cant line up zip code. It ends up in middle of the cell. This is so frustrating.
   
   

[dan1]

1. There are two “extract” functions in Bubble. One for extracting information from text (like the domain name from an email). And another for extracting content from an address. If you attempt to use the extract function on text value, you will see what you’re seeing. But if you use the extract function on a properly set up geographic address, then you’ll see the extract options for components of an address. (Double check the setup in your database).

2. For the zip code falling to a second line, it looks like this is happening because there is not enough “room” (width) for the entire address to be displayed on one line. (As well, the text is set to “centered”) Given that, Bubble is properly bumping that content to the next line. So, make the text box wider so it has room to breathe. Or, segment out the address using the :extract feature discussed above into multiple lines for consistency of formatting.

[irotsenmar]

Hi Dan -
my property is set up as geographic address. I get extract function now, however I can’t get spacing between two extracted words. See screenshots below.

[dan1]

Have you gone in to edit using the “Rich text editor” (in faint text in the lower right)?

[irotsenmar]

It worked when I used rich text editor. it does not extract room number for some reason. I have it in backend as 1023 Springdale Rd #9F, Austin, TX 78721, USA

Also, Is there way to turn off the text to center? I cant seem to line the addresses properly since different addresses have a different amount of characters.

[dan1]

With Google addresses, they do not include secondary data as part of the main components. This is not a Bubble bug, but rather how Google Maps serves and stores addresses. (When retrieving an address from Google, you cannot store it with the secondary data). Rather, you may create a supplemental text field for capturing this.

For example, the TaskRabbit website, which uses the Google Maps API, segments these out.

[irotsenmar]

I am not really sure how to segment the room number out on its own. Also since the addresses are links, the text is always gets centered. Below are three different addresses that don’t line up with the rest of the fields. I’ve tried everything from making the text box wider to tweaking responsive mode.

[andrewgassen]

For the link centering, it looks like the Style of your link is set to have the text centered. You should be able to just edit the style to make it left-aligned.

[irotsenmar]

Hi Andrew -
Thank you for your tip. I did not even notice the Style of my link was set to center. Not sure how I missed that one. Thank you so much!