Using the Google Directions Component with static and dynamic data

This is my latest video describing how to use Google Maps and Directions components within app connect using either static data or dynamic data from a database table.
This is 27 minutes long so you may wish to pour your preferred beverage first.

PLEASE NOTE
Those with Wappler version 2.0.0 or earlier will need to use this updated dmxGoogleDirections.js file if using dynamic data.

dmxGoogleDirections.zip (2.2 KB)

I will be adding simplified a how to guide later.

5 Likes

Thanks Brian, great tutorial as always. It would be good to see if you could start with a blank map, mark the waypoints manually, then write back to the database to save that route, then that would be everything covered. Cheers :beer:

Looking at that now Neil but just doesn’t seem to have the appropriate listeners/ properties in place within the map and directions components to do that. I will continue to investigate and perhaps we could have a feature request.

At the moment i am looking at how to:

Have to lat/lng and/or address of a point on the map clicked available within the dynamic events picker so it can be passed to an api
Have the same info made available on drag/drop
Ability to add a marker via an event

And lastly a geocode component within Wappler would be great, take an address as a parameter and a google API key and return the API location object. That would be an awesome timesaver.

Certainly poking around in the maps and directions js has taught me i need to brush up on my javascript, it was never my strong point but i am not as up to date as i should be.

2 Likes

Hello @Hyperbytes ,

Thank you for the great tutorial. Although I appreciate the simplicity of having a google maps integration inside of wappler I was wondering if it is possible to use mapbox instead. It is cheaper and has turn by turn navigation (among other things) built in. Do you know how one would go about implementing a mapbox map? Do I just use their CDN

or npm install?

Best regards,
Albert

1 Like

I do not believe map box is supported

1 Like

ok, thank you! I’ll stick to google maps for now then.

Thank you for the tutorial. I am looking to build an app that will take a list of customer addresses and display them 1 by 1 for delivery drivers. I would need a button on each customer order to navigate from the users location to that address, which opens google maps app and starts navigation is this possible in Wappler?

Hi @Hyperbytes,

I love your videos as I am new to Wappler and your course content has been a great help to me. Thank you for that!

Quick question. In this roadtrip video, you mentioned that you are not discussing geocoding in this video as you had already discussed it in a previous video. Ive been scouring the internet and cannot find the video where you talk about geocoding. Can you please point out which video you are referring to?

1 Like

I will be revisiting geocoding in my new course, probably in about 2 weeks

2 Likes

Thank you so much! This article you gave is really helping me get a hold on what I need to get done. Looking forward to your revisit on the subject.