Loop through coordinates, adding a marker to the map for each using HERE maps

Question

I am trying to add a number of markers to my map, using HERE maps API. I have my coordinates in a list, and there are 30+ pairs.

var coords = [[60.1697768639186, 24.82923586371288],
[60.170497332447866, 24.828592133548653 ],
[60.17093227431904, 24.827707004572943 ], ..........

https://developer.here.com/documentation/maps/3.1.22.1/dev_guide/topics/marker-objects.html

The documentation outlines that this is the way to add single markers

var parisMarker = new H.map.Marker({lat:48.8567, lng:2.3508});
map.addObject(parisMarker);

var romeMarker = new H.map.Marker({lat:41.9, lng: 12.5});
map.addObject(romeMarker);

var berlinMarker = new H.map.Marker({lat:52.5166, lng:13.3833});
map.addObject(berlinMarker);

So I ultimately want to loop through each element of my coordinate list and add a marker for each pair.

I am trying this..

// chargepoints = 2 if the chargepoints flask route is completed
if (chargepoints = 2) {

  // ADD THE CHARGEPOINTS TO THE MAP
  for (var i=0; i<coords.length; i++) {

    var chargemarker = new H.map.Marker({lat:coords[i][1], lng: coords[i][0]});map.addObject(chargemarker);

    map.addObject(chargemarker);

}
}

However the markers are not appearing. When I insert some consolg.log("hello"); into different stages in the loop, they appear in the console however.

Answer 1

I don't know if you found a way to do it but I just tried this:

    const coords = [
        [48.8,2.35],
        [41.9,12.5],
        [52.5,13.38]
    ];

    coords.forEach((el)=> {
        map.addObject(new H.map.Marker({lat:el[0], lng: el[1]}));
    });

And it worked for me. Hope it can help !

Answer 2

If You want to add markers using python flask then below code perfect

• here we used here map api

<script>

      // Initialize the platform object:
      var platform = new H.service.Platform({
        'apikey': 'YOUR_API_KEY'
      });
       **const coords = {{ coordinates }}**
       const lat = 20.5937;
       const long = 78.9629;

    // Obtain the default map types from the platform object
      var maptypes = platform.createDefaultLayers();

      // Instantiate (and display) a map object:
      var map = new H.Map(
        document.getElementById('map'),
        maptypes.vector.normal.map,
        {
          zoom: 6,
          center: { lat: lat, lng: long }
        });
      var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

      **coords.forEach((el)=> {
        map.addObject(new H.map.Marker({lat:el[0], lng: el[1]}));
    });**
</script>