Google Directions Waypoints Not being read dynamically

Wappler General
#1

I followed Brians video: Using the Google Directions Component with static and dynamic data

  1. I can use the same API query and the dynamic markers are created in the Google maps.
    a. remove all that excess data and add the Directions Component and I get nothing.
  2. Manually entering the map center, origin and destination gives me three waypoints but none of the dynamic points.
  3. I get this error 10 times in the console, I have 12 way points: https://chromestatus.com/feature/5745543795965952 
<dmx-serverconnect id="sc_Cigars" url="/api/qry/qryCigarSites_URLs"></dmx-serverconnect>
<dmx-query-manager id="query1"></dmx-query-manager><!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="guideRoute" appConnect="local" components="{dmxGoogleDirections:{},dmxGoogleMaps:{},dmxBootstrap5TableGenerator:{},dmxStateManagement:{},dmxMoment:{}}" moment_2="cdn" -->


<div class="container" id="mapAndRoute">

    <div class="row">
        <div class="col">

            <dmx-google-maps id="maps1" maptype-control="true" streetview-control="true" zoom-control="true" fullscreen-control="true" scale-control="true" rotate-control="true" tilt="true" scrollwheel="true" address="1901 Fogarty Ave, Key West, FL 33040" height="500" marker-id="$index" marker-address="streetAddress+', key west, fl'" enable-clusters="true" zoom="14" marker-label="markerName">
            </dmx-google-maps>
            <dmx-google-directions id="dir1" map="maps1" dmx-bind:waypoints="tableRepeat2[0].streetAddress+', key west, fl'" dynamic-update="true" origin="1 duval, key west, fl" destination="400 duval, key west, fl">
            </dmx-google-directions>
        </div>
    </div>
</div>

<div class="container" id="dataTable">
    <div class="row">
        <div class="col">
            <div class="table-responsive">
                <table class="table table-hover table-sm">
                    <thead>
                        <tr>
                            <th class="sorting" dmx-on:click="query1.set('offset','streetAddress');query1.set('offset',query1.data.offset == 'desc' ? 'asc' : 'desc')" dmx-class:sorting_asc="query1.data.offset=='streetAddress' && query1.data.offset == 'asc'" dmx-class:sorting_desc="query1.data.offset=='streetAddress' && query1.data.offset == 'desc'">Street address</th>
                            <th class="sorting" dmx-on:click="query1.set('offset','markerName');query1.set('offset',query1.data.offset == 'desc' ? 'asc' : 'desc')" dmx-class:sorting_asc="query1.data.offset=='markerName' && query1.data.offset == 'asc'" dmx-class:sorting_desc="query1.data.offset=='markerName' && query1.data.offset == 'desc'">Marker name</th>
                            <th class="sorting" dmx-on:click="query1.set('offset','markerNumber');query1.set('offset',query1.data.offset == 'desc' ? 'asc' : 'desc')" dmx-class:sorting_asc="query1.data.offset=='markerNumber' && query1.data.offset == 'asc'" dmx-class:sorting_desc="query1.data.offset=='markerNumber' && query1.data.offset == 'desc'">Marker number</th>
                            <th class="sorting" dmx-on:click="query1.set('offset','yearCirca');query1.set('offset',query1.data.offset == 'desc' ? 'asc' : 'desc')" dmx-class:sorting_asc="query1.data.offset=='yearCirca' && query1.data.offset == 'asc'" dmx-class:sorting_desc="query1.data.offset=='yearCirca' && query1.data.offset == 'desc'">Year circa</th>
                            <th class="sorting" dmx-on:click="query1.set('offset','markerThumb');query1.set('offset',query1.data.offset == 'desc' ? 'asc' : 'desc')" dmx-class:sorting_asc="query1.data.offset=='markerThumb' && query1.data.offset == 'asc'" dmx-class:sorting_desc="query1.data.offset=='markerThumb' && query1.data.offset == 'desc'">Marker thumb</th>
                            <th class="sorting" dmx-on:click="query1.set('offset','imageURL');query1.set('offset',query1.data.offset == 'desc' ? 'asc' : 'desc')" dmx-class:sorting_asc="query1.data.offset=='imageURL' && query1.data.offset == 'asc'" dmx-class:sorting_desc="query1.data.offset=='imageURL' && query1.data.offset == 'desc'">Image url</th>
                        </tr>
                    </thead>
                    <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="sc_Cigars.data.query" id="tableRepeat2" dmx-state="query1" dmx-sort="offset" dmx-order="offset">
                        <tr>
                            <td dmx-text="streetAddress"></td>
                            <td dmx-text="markerName"></td>
                            <td dmx-text="markerNumber"></td>
                            <td dmx-text="yearCirca"></td>
                            <td dmx-text="markerThumb"></td>
                            <td dmx-text="imageURL"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<meta name="ac:route" content="/guideRoute">
#2

UPDATE:

  1. Add dynamic markers to Maps component
    Result: Map displays as expected
  2. Disable dms-bind:wapoints and manually add 3 waypoints in addition to dynamic markers
    Result: 1. Directions show
    2. Waypoints are draggable
    3. New waypoints cannot be added. It would be beneficial to the user if there could add their own stops along the route.

Can someone guide me to the proper source for using these options:
Google Maps

#3

Try doing a map.refresh() each time the data changes.

For example, I have all my waypoints in a datastore with

dmx-on:updated="content.map_buyer_tour.refresh()"
#4

Thanks Ken, it was your lessons that initially gave me the inspiration to try Maps. I then stumbled on Brian’s videos about Directions have invested 24 hours with proper results.

Researching the Google setup process uncovered “lat” & “lng” don’t match my “lat” & “lOng”. Thanks for the response and the training courses you put together.