javascript - Google static maps icons only working for a portion of the markers

Question

I'm trying to plot a series of markers on a Google Static Map. Since the static maps API doesn't support labels > 10 I have resorted to using images of numbers.

For some reason, the static map markers only update a portion of the markers with custom images, the remainder are the default markers. I would like all default markers replaced with custom images.

Here's my code with API keys and sensitive data removed.

const realtor = require("realtorca");
const unirest = require("unirest");
const nodemailer = require("nodemailer");
const { staticMapUrl } = require("static-google-map");

//https://rapidapi.com/apidojo/api/realtor-canadian-real-estate?endpoint=apiendpoint_bc4d93dd-15c5-47de-b04e-854b2e6176be

var req = unirest(
  "GET",
  "https://realtor-canadian-real-estate.p.rapidapi.com/properties/list-residential"
);

req.query({
  LongitudeMin: -79.44438,
  LongitudeMax: -79.404,
  LatitudeMin: 43.75135,
  LatitudeMax: 43.78448,
  PriceMax: 1500000,
  ZoomLevel: 15,
  BuildingTypeId: 1,
  //NOTE: if there are more than 50 records I need to figure out how to traverse through the pages
  RecordsPerPage: 50,
});

req.headers({
  "x-rapidapi-key": "secret",
  "x-rapidapi-host": "realtor-canadian-real-estate.p.rapidapi.com",
  useQueryString: true,
});

let resultsArray = [];

req.end(function (res) {
  if (res.error) throw new Error(res.error);

  let totalResults = res.body.Paging.TotalRecords;

  let mapObject = {};

  let addMarkers = async function () {
    for (i = 0; i < totalResults; i++) {
      mapObject.markerGroups.push({
        iconURL: `https%3A%2F%2Fapi.geoapify.com%2Fv1%2Ficon%2F%3Ftype%3Dmaterial%26color%3Dred%26icon%3Dcloud%26iconType%3Dawesome%26text%3D${i}%26apiKey%secret`,
        markers: [
          {
            location: {
              lat: res.body.Pins[i].latitude,
              lng: res.body.Pins[i].longitude,
            },
          },
        ],
      });
    }
  };

  mapObject = {
    key: "secret",
    scale: 2,
    size: "1000x1000",
    format: "png",
    markerGroups: [],
  };

  addMarkers();

  let url = staticMapUrl(mapObject);

  //LOGGING TO SEE WHAT HAPPENS
  console.log(totalResults);
  console.log(mapObject);
  console.log(url);

  const forLoop = async (_) => {
    for (let i = 0; i < totalResults; i++) {
      await resultsArray.push(
        "<p>",
        res.body.Results[i].Property.Address.AddressText + "<br />",
        res.body.Results[i].Property.Price + "<br />",
        "Number of bathrooms: " +
          res.body.Results[i].Building.BathroomTotal +
          "<br />",
        "Number of bedrooms: " +
          res.body.Results[i].Building.Bedrooms +
          "<br />",
        "http://www.realtor.ca" +
          res.body.Results[i].RelativeDetailsURL +
          "<br />",
        "Notes: " + res.body.Results[i].PublicRemarks + "</p>"
      );
    }
    console.log(resultsArray);
    console.log(totalResults);

    let transporter = nodemailer.createTransport({
      host: "giow1039.siteground.us",
      port: 587,
      secure: false, // true for 465, false for other ports
      auth: {
        user: "notifications@danielpuiatti.com",
        pass: "secret",
      },
    });

    // send mail with defined transport object
    let info = {
      from: "notifications@danielpuiatti.com", // sender address
      to: "dpuiatti@gmail.com", // list of receivers
      subject: "Hello ?", // Subject line
      html:
        "<h1>Your daily Realtor.ca update</h1>" +
        String(resultsArray).replace(/,/g, "").replace(/|/g, " | ") +
        '<img src="' +
        url +
        '" width="800" height="600"/>',
    };

    transporter.sendMail(info, function (err, info) {
      if (err) {
        console.log(err);
        return;
      }
      console.log(info.response);
    });
  };

  forLoop();
});

Answer 1

The icons were not changing due to the limit of 5 custom icons. I switched to marking each point with an alphabetical character instead.