Goople maps and directions

Wappler General
1

Hi Wapplers,
I have been following a video about adding google maps and directions. I have tables with the addresses in but they are not lat lng.

Can dynamic waypoints accept a query of addresses not lat lng?

I have it all working really nice apart from the all important part. A user setups their trip, they select a customer that gave collection and delivery addresses, you add the customers/collection/delivery addresses into your trip and it creates the trip tables etc, but not on the map. I can add a manual waypoint of a string address, i.e “High Street, Derby, UK” and it works, so waypoints does appear to accept non lat lng addresses, but cant get that to work with 2 addresses, but dont know the seperator

Hope it can work with addresses

thanks
darren

2

so maps directions in wappler will accept more than one string address and work, just put this in “89-1 Fennell’s Cl, BN21 2RQ
|10 High St, DE73 6UF”

and it worked and gave the directions from start to B then C back to D.

But passing the same 2 addresses from a query does not work

3

I also know my query is triggered and returning data, this does NOT work (2 addresses):

sc_Waypoint_sel.data.q_Waypoints

this DOES work:

sc_Waypoint_sel.data.q_Waypoints[0].address1+sc_Waypoint_sel.data.q_Waypoints[0].town+sc_Waypoint_sel.data.q_Waypoints[0].postcode

(but only gets one address of course as just the 1st record in the array).

4

Google maps api has limits for using addresses in for the dynamic pins/locations on the map and probably you hit them. Please check the browser console for any error returned by Google Maps API.

5

i hoped you just solved it then lol, i looked in console and it said could not geocode, so enabled that api in google maps. Not hitting any limits, its in dev, 2 addresses.

but now i enabled geocode I get this error

js?key=AIzaSyBZU18umN4IQDtZ-gwLbTRZbOQ2Rh2yrfs&language=en:70 InvalidValueError: in property waypoints: at index 0: in property location: not a string; and not a LatLng or LatLngLiteral: in property lat: not a number; and unknown property address1

6

So what exactly have you entered in the maps UI? Please share some screenshots

7

so this screenshot shows it works with the address format I have in the DB, when I use the 1st value in the array it works, the pin is on the map:

1
1928Ă—1371 123 KB

When i change it to the query it doesnt work, screenshot:

2
2929Ă—1371 111 KB

and screenshot of the page showing the error, the addreses in the list in the middle and the map at the bottom

3
33300Ă—1764 178 KB

8

Sorry but that’s not what i meant. Show me where are you using this? Where in the Maps UI is that selected?

9

hopefully this is what you mean:

4
4750Ă—908 46.1 KB

10

So, do you need all the 3 query fields the address address1 + town + postcode?

11

i think maps would, address 1 is just the street and number, then its town and post code.

12

Ok please try adding:

sc_Waypoints.data.q_Waypoints.map(`address1 + ', ' + postcode + ', ' + town`)
13

no console error now but no pin showing

14

sorry there were errors in the copy paste, fixed those now get this error

1
11499Ă—316 41.7 KB

15

Could you type the following in the console and check the output of it:

dmx.parse("sc_Waypoints_sel.data.q_Waypoints");

and

dmx.parse("sc_Waypoints_sel.data.q_Waypoints.map(`address1 + ', ' + postcode + ', ' + town`)");
16

1
11486Ă—625 69.8 KB

17

Is dmxFormatter.js included on the page?

18

no, did a search and not showing

19

Easiest is to insert an expression somewhere and add a formatter to it using the UI, it then copies the file and inserts the include tag.

20

ok, i manually added i added it in ( ) and same result same result on the browser output