Google maps - highlight point A to B

1

Hi guys

Would it be possible to highlight the distance from point A to point B in google maps?
Link to app: https://drivemepublic.bubbleapps.io/version-test/index
user: 1@1.com
pass: 123
Menu button: Ride
Link to editor: https://bubble.io/page?id=drivemepublic&tab=tabs-1

Thank you

2

Are you trying to display the route or just the distance between 2 locations?

3

the route

4

You have add an html element with the code below. Replay the lat long with data coming from bubble. Please also note that you have enabled I frame option as not to have conflicts in the API. You can get your own API key from Google console.

`

Directions service html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } #floating-panel { position: absolute; top: 10px; left: 25%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: 'Roboto','sans-serif'; line-height: 30px; padding-left: 10px; }

'
5

i have the API but are you sure the code is correct?
Where are the bubble fields?
by using the code above i get this: https://noah-public.bubbleapps.io/version-test/test2?debug_mode=true

6

Sorry the code did not display correctly. See it here

https://publictestapp.bubbleapps.io/version-test/directions

7

Thank you. it works :slight_smile:

1 Like
8

Hey @AliFarahat

Is it possible to see the code of your html element in this example ?

This would be very useful to me.

Thank you very much