Google Maps Dynamic Markers - all pins are dropped in the center of the screen rather than the correct locations

[TGD]

Wappler Version : 3.7.7
Operating System : Windows
Server Model: NodeJS
Database Type: MySQL
Hosting Type: Docker

Expected behavior

Pins should be dropped on the locations corresponding to the address associated with each pin

Actual behavior

All pins are dropped in the center point of map

How to reproduce

On app load, I add the values 1 and 3 to the array 'arr1'

body is="dmx-app" id="test" dmx-on:load="run([{run:{action:arr1.add(1)}},{run:{action:arr1.add(3)}}])"

Then I filter the ServerConnect's response using 'arr1' and feed the result into the dynamic markers' fields

dmx-google-maps id="maps1" dmx-bind:markers="locations.data.query.where(row_num, arr1.items, 'inArray')" marker-address="address" marker-label="address"

This is what I get

Interestingly, marker-label is picking up the right value of address, but marker-address is not

If I hardcode 'arr1' (instead of setting its value on app load). It works correctly. It also works if I used [1,3] instead of array.items as follows:

dmx-google-maps id="maps1" dmx-bind:markers="locations.data.query.where(row_num, [1,3], 'inArray')" marker-address="address" marker-label="address"

I tried forcing a map refresh. It doesn't change anything.
I also tried inserting more values into 'arr1' after. An extra pin gets generated, but all the pins are in the centre of the map.

Thanks!

[TGD]

Anyone has any idea why this issue is occurring and the same arrays ([1,3]) produce different results?

[TGD]

Hey @George would you be able to help on this? I haven’t figured out any solution and it’s still breaking my application.

Interestingly, on the first load of the page, the pins are positioned corrected and labelled correctly (both getting the values from the address field in my API response). However, there are 2 issues:

1. If marker-address and marker-id pull from different fields, e.g. marker-address=“address” marker-label=“id”, then the pins are positioned correctly and the label is empty.
2. I have a button that would add or remove a location from the list of markers. If I click on that button to remove a location, then the pin is removed, but all the other pins are grouped together at the centre of the screen (like the first picture) instead of their respective locations

[Teodor]

Please provide a link to your page where we can check this.

[TGD]

The page isn’t public yet, but if you follow the steps in my first post, you should be able to replicate the issue. Alternatively I could screen share. Let me know if there’s an easier solution!

[TGD]

Hi @Teodor, have you had a chance to look into this issue?

Essentially you can take any maps with dynamic markers, and filter the API response (which has the addresses) using an array that you had dynamically set within the app.

dmx-google-maps id=“maps1” dmx-bind:markers=“locations.data.query.where( row_num , arr1.items, ‘inArray’)” marker-address=“address” marker-label=“address”

Thank you for your help!

[TGD]

@patrick I saw @teodor referred to you. What do you think is causing this issue?

Thanks

[jellederijke]

I experience this same issue. I noticed the issue during Ken’s starter course (I’m a Bubble user tipping toes with Wappler).

So I’m not super certain this is truly a bug, or just me not having the proper Wappler skills, yet. I’m happy to share my project to replicate the issue.

[patrick]

Here an update.

dmxGoogleMaps.zip (6.5 KB)

[TGD]

This is awesome - everything works now! Thank you so much @patrick!

not sure if it’s by design, but marker-label needs to be populated with a string variable, not an integer

[jellederijke]

Yes this is awesome, thanks!

[Teodor]

This has been fixed in Wappler 3.9.0