External URL link on iPhone

[2020travelapp]

Hi all, hi @J805,

I have an external link linking to Google Maps (app if installed or site if not). It includes the Origin and Destination and tells it to use walking as the mode of travel. It works fine on an Android phone but on an iPhone it adds in a %20 instead of a space in various places. I have tried several ways to replace this including as per image (both with RegEx checked and not)

This is the link I am using. Any ideas?

This is the error that Google Maps gives back on the iPhone:

We could not find “7A%20Whitton%20Waye,%20Hounslow%20TW3%202LT,%20UK” We could not find “Horse%20Guards%20Rd,%20Westminster,%20London%20SW1A,%20UK”

Thanks as always for any advice.
David

[equibodyapp]

I use this set up:

[2020travelapp]

Thanks @equibodyapp I tried what you did however it doesn’t seem to work for me at all. It opens Google maps but doesn’t pull in the required destination, nor does it open a directions view in there which is what I want (showing the walking version).

[J805]

Hey @2020travelapp

Try using a find and replace %20 with + and see if that helps. Right now you have %20 with a space. So instead of the space, use a +.

Hope that makes sense.

A picture is probably better, here you go:

[2020travelapp]

Thanks @J805 I did try that. The problem seems to be that it isn’t recognising the ‘%20’ as in both cases the output didn’t change

[J805]

Hmm, I keep trying too and it doesn’t like it even when I manually put in the data with that link. Are you sure that is how the link should be formatted?

[J805]

Here is some documentation that I am looking at to try to figure it out:

URL Encoding: URL Encoding  |  Maps URLs  |  Google Developers

Map URLS: Get Started  |  Maps URLs  |  Google Developers

[2020travelapp]

Thanks @J805 I will check that documentation.

The original settings I posted in the first message works fine on Android, only on ioS does it fail to understand the %20 and so does not understand the origin or destination

[J805]

Oh, weird. Hmmm

[lantzgould]

@J805 has the right idea. They need to be replaced by a +.

I have a small plugin I use to make life easier, but it’s essentially the same thing.

Example on Desktop:

Example on IOS:

[J805]

Hey @lantzgould

What’s the plugin? Also, do you know what the link should look like so I can test it out? Does @2020travelapp have the link set up correctly?

Thanks for chiming in.

[lantzgould]

Ah, it’s a private plugin. It’s just more or less an easy way to have a placeholder. Still requires the need to find and replace the spaces with +. I can share it or just make it public.

The link above looks good. Only thing I’m now noticing is @2020travelapp is using the ‘calculate coordinates’. This shouldn’t be necessary as long as your passing the from and to address in the url. Google will automatically format it for you. Next test you run, watch the url bar change.

Hope I was able to help a bit.

[J805]

Hey @2020travelapp

Thanks to @lantzgould verifying that this is how it works. I got it working, you can copy and paste from here first to make sure it works. Then insert your dynamic data one piece at a time.

https://www.google.com/maps/dir/?api=1&origin=20+W+34th+St+New+York+NY+10001&destination=200+Central+Park+West+New+York+NY+10024&travelmode=walking

Editor: Test805421 | Bubble Editor

Preview: https://test805421.bubbleapps.io/version-test/google_maps_link?debug_mode=true

Hope that helps!

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

• One-on-One Tutoring
• eLearning Hub
• Video Tutorials

[lantzgould]

This was my plugin. It was more to save time of having to write out the url and structure it everytime.

Map Opener Plugin for Bubble, by Lantz

[J805]

Nice! That definitely makes it easier.

[2020travelapp]

Wow, thanks @J805 and @lantzgould , extremely helpful!

I have installed the plugin and had my first time getting it to work on iOS, thanks for that. However on my Android it opens ok in the browser but it gives me an option to go to the app (Google Maps, installed) and this gives the following error when clicked.

This is the plugin set up:

Any idea what might be causing this?
Thanks so much for your help on this!
David

[lantzgould]

Could you share a view only editor link? Or perhaps more screenshots of the formatted as address & the find/replace function?

I don’t have an Android, but should function the same.

*Edit: I’ve tried on an Android emulator, and it’s working ok.

[lantzgould]

@2020travelapp FYI, I added an Apple Map Location function in case it’s useful for ya. I needed it for an app I’m building anyways.

[2020travelapp]

Hi again and thanks again for the help with this, it’s very much appreciated.

I sent the link to the editor in view-only to you both in a PM.

This is the trigger (clicking the walking man on map tab in bottom tab list if you open it). In editor Group Main → Group Maps → Group Maps Centre → RepeatingGroup Info Point in Maps Centre → Group Google Map Directions to IP)

Find and replace done like this:

I have saved all Location’s addresses in our Database as latitude and longitude, which when saved write as an address and this gives a better level of accuracy.

This is the Information Point (attached to a Location with the same name) for “Westminster Bridge” in our Admin system (tour_admin page). The user can drag around the map or add lat/long to specify exact point.

I am using this app via BDK Native as its primary use which I think might be part of the issue here now. This means we have a native app for iOS and Android - click this to go to install and straight to relevant page in app for this tour here:

In app: https://wandr.page.link/testdirs (Firebase Dynamic link to page needed)

In browser: https://app.wandrguides.com/version-test/cities-directions-test/1607428795779x189938724519280640

It seems to work now in browser (though I need to look again at the destination as the accuracy isn’t what it should be though I think I can generate the address from the lat/long as I had previously as the interim step to make this work.

1. On Android from browser it works as expected (it opens the built-in Google maps)

2. On iOS in browser it does the same but opens Google Maps in browser as App is not installed.

3. On Android app it asks to leave the app (which it didn’t on my previous implementation via Link), then opens in a variation of Google Maps I don’t recognise (see image), which seems to be within our app
   

   

When I click on the “Navigate in App” option it gives an error

4. On iOS in app, nothing happens.

As this may be more related to BDK Native might you be able to shed any light on this @gaurav ?

Thanks again everyone for looking,
David

[J805]

So would it work if you just use the link? I don’t have an android to test it on either.