adding dinamic defineMapboxMarker

[agracia-foticos]

Its impossible to adding defineMapboxMarker with a array

Please i need help

I have this reproduction link https://stackblitz.com/edit/nuxt-starter-eencva

We want to push markers into a map, but defineMapboxMarker not runs, not prints console.log, and dont push the markers...

How we can charge markers from array in a map with defineMapboxMarker??

[AlexLavoie42]

This is because you are passing a null ref to defineMapboxMarker.

When the function recieves an html ref, it is always undefined at first, so we must wait until the HTML is loaded and the ref is no longer undefined. Since you are giving a ref that never becomes defined, we end up waiting indefinitely for HTML that does not exist.

For this to work, you should just pass null instead.

This seems a bit confusing, but this syntax is not really intended. The best way to use defineMapboxMarker is to create a new component for your marker, and nest it inside the map the same way as the default marker. This way you do not need to pass the map ID as it gets auto injected.

When you are not giving HTML to the marker, the syntax becomes MUCH simpler as you no longer need to use the callback:

const marker = defineMapboxMarker(markerID, options)
marker?.setLngLat(lnglat)