Google Map Directions Multi stop (waypoints) example

Hello all,

@motorhome wanted help on developing a multi stop directions on google map, so this is it. I am positing this solution as separate topics so it can become easier for other people to lookup in the future. So here is the example below.

https://publictestapp.bubbleapps.io/version-test/mapmultilocation?debug_mode=true

The only thing that i have failed to accomplish is for the map to stretch. The Border of the HTML element is responsive but the map isn’t. May be one of you can help out.

Editor: publictestapp | Bubble Editor

If anyone has an idea on how to improve it then please share.

9 Likes

Wow - thanks @AliFarahat this is awesome. Just one question and then a few further requests if at all possible.
When you click Save or Add Via the map first centres on United Arab Emirates then back to where ever the waypoint is positioned (im my case Australia). Can this be avoided??

I would like to add another feature or two if possible.
Date - As the user will be planning a trip I would like to add a date to the start, destination and each Via point. I have added these date fields in my own app and saved them in the database via the workflow. I was also able to change the view of the repeating group to sort by date (ascending) rather than sorting order and this works well.

I would like this date to then serve two purposes.
1 - the route be calculated by date and not the current most direct route - that is currently if you add a 2nd Via location (C) that is between start (A) and the the first Via location (B) the route will go the most direct which will be A-C-B. I would like it to go A -B-C even if you have to back track.
2 - I would like the map markers to show the date rather than the current address of the marker. I have been able to achieve this in other maps in my app using the Bubble methodology but is more difficult for me in this map as it is in code (that I do not understand)

Secondly I would like to use the time and distance functions that you showed me in the original post. I have added these to the map in my app but obviously they only show the time and distance from the From and To addresses. How would we get them to add in the total distance now that includes the Via waypoints??

I know this is a big ask but I do really appreciate your help on all this :grinning:

For some reason is not working for me. Is it still everything ok?

Hello, this script is available for download ???
It’s not working for me, I’d like to give you a shake to see if I can fix it.

Hello @AliFarahat

I’ve seen that you’ve previously helped with the HTML code for multi-stop directions. I am in need of such a code which is an essential part of my project and would appreciate any help that you could provide.

Where I stand now - I have the Google API keys configured and am able to use the HTML as an iframe to get the route from dynamic point A to B. However I am unable to figure out how to add any number of dynamic waypoints (these waypoints being addresses stored in the DB). I would also like to display on the map travel duration from one waypoint to the next.

Thank you and look forward to hearing from you.

Hi, I can’t open the links. Can I have the HTML for this? Thanks