Microsoft.Maps.Pushpin not appearing in Dynamics 365 app for phone

I'm currently trying to add Pushpins to a Bing map in a Dynamics 365 form.

While it is going smoothly for both computer & mobile web based versions, I'm facing an issue with the Dynamics 365 app for phone.

I checked the mobile option on both the HTML webresource and form I'm using, so my problem does not come from that.

This is my HTML file:

<body onload="loadMap();">
  <div id="myMap"></div>
  <script type="text/javascript">
    function loadMap() {
      if (window.top.mainAddress== null) {
        setTimeout(loadMap, 300);
        return;
      }
      
      Microsoft.Maps.loadModule('Microsoft.Maps.Search', () => {
        let map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
          mapTypeId: Microsoft.Maps.MapTypeId.aerial,
          zoom: 3
        });

        window.top.createMarker = (lat, lon, url) => {
          try {
            let marker = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(lat, lon), {
              color: "blue"
            });
            Microsoft.Maps.Events.addHandler(marker, 'click', () => {
              window.open(url);
            });
            map.entities.push(marker);
            return true;
          }
          catch (exception) {
            return exception;
          }
        }

        let searchManager = new Microsoft.Maps.Search.SearchManager(map);
        let requestOptions = {
          bounds: map.getBounds(),
          where: window.top.mainAddress,
          callback: answer => {
            map.setView({ bounds: answer.results[0].bestView });
            map.entities.push(new Microsoft.Maps.Pushpin(answer.results[0].location, { color: "yellow" }));
          }
        };
        searchManager.geocode(requestOptions);
      });
    }
  </script>
  <script type="text/javascript" src="https://www.bing.com/api/maps/mapcontrol?key=XXX" async="" defer=""></script>
</body>

And my JS file, with both functions called when the form load:

function getMainAddress(executionContext) {
  let formContext = executionContext.getFormContext();
  window.top.mainAddress = [
    formContext.getAttribute("address1_line1").getValue(),
    formContext.getAttribute("address1_postalCode").getValue(),
    formContext.getAttribute("address1_city").getValue(),
  ].filter(Boolean).join(' ');
}

function secondaryMarkers(executionContext) {
  if (window.top.createMarker == null) {
    setTimeout(() => secondaryMarkers(executionContext), 500);
    return;
  }

  Xrm.WebApi.retrieveMultipleRecords("lead", "?$select=address1_latitude,address1_longitude&$top=5").then((result) => {
    result.entities.forEach((lead) => {
      alert(window.top.createMarker(lead.address1_latitude, lead.address1_longitude, `https://XXX.crm.dynamics.com/main.aspx?pagetype=entityrecord&etn=lead&id=${lead.leadid}`));
    });
  }).catch((exception) => {
    alert(exception);
  });
}

So this is how it's supposed to work (Obviously in a non-optimal way but right now I just want this to work properly first): The getMainAddress function sets the window.top.mainAddress value while loadMap is waiting. Once the value is set, the map is created, the ````createMarker``` function is too, and the yellow pushpin representing the current lead is added to the map.

This part acutally works for both the web version of dynamics (On mobile & on laptop) and the Dynamics 365 app for phone.

After that, the secondaryMarkers function calls the createMarker function with the coordinates of 5 other leads.

My problem is that this function does alert(true) for every environments, but the blue pushpins do not appear in the Dynamics 365 app for phone, while they are visible in the web version (Be it on a laptop or on a phone).

Any idea of what I am doing wrong here ?

Does this problem comes from my code are from the Dynamics app ?

If it is the former, how do I add pushpins to a bing map ?

Solution

So after running differents tests it seems only the first element pushed in the map.entities collection is rendered in the Dynamics 365 app for phone.

I ended up using a Microsoft.Maps.EntityCollection in which I pushed the pushpins and it worked.