How to display distanceMsg in Location based

[MilosGlisovic]

Hello everyone, I would like to do the same example as in this clip https://www.youtube.com/watch?v=biCKHVefIe8
@nickw1 @kalwalt Can you please see this
I would like to set the distanceMsg attribute in the a-text value, so that it is always visible, and a-text as a child element of a-image, so that the distance is always below. Aframe has special rules for child elements so I'm wondering how I could do this in JS?

This is my code but dont work

const model = document.createElement('a-image'); model.setAttribute('gps-entity-place',latitude: ${latitude}; longitude: ${longitude}`);
model.setAttribute('name', name2);
model.setAttribute('src', logo);
model.setAttribute('width', wdt);
model.setAttribute('height', hg);
model.setAttribute('look-at', '[gps-camera]');

               // for debug purposes, just show in a bigger scale, otherwise I have to personally go on places...
               model.setAttribute('scale', '20, 20');
               //model.setAttribute('position', '0, 0, 0');

              
               model.addEventListener('loaded', () => {
                window.dispatchEvent(new CustomEvent('gps-entity-place-loaded'))
            });
               
  

   const text = document.createElement('a-text');
   text.setAttribute('gps-entity-place', `latitude: ${latitude}; longitude: ${longitude}`);
   text.setAttribute('color', "blue");

  
   text.addEventListener('gps-entity-place-update-positon', (event) => {
    const distanceMsg = document.querySelector('[gps-entity-place]').getAttribute('distanceMsg');
   
   text.setAttribute('value', distanceMsg);

   textl.addEventListener('loaded', () => {
    window.dispatchEvent(new CustomEvent('gps-entity-place-loaded'))
});
     model.addEventListener('click', clickListener);
   scene.appendChild(model);
   model.appendChild(text);

});

`

[linshenqi]

<script type="text/javascript">
    window.addEventListener('load', () => {
      document.querySelector('[gps-entity-place]').addEventListener('gps-entity-place-update-position', (payload) => {
        let v = parseInt(payload.detail.distance);
        alert(`${v} meter`);
        // you may show the distance in the value of <a-text>
        // document.getElementById("id-of-a-text").setAttribute('value', `${v} meter`);
      });
    })
</script>