I am making an app which needs to display a list of 10 address results I am trying to use the lat and lng to show 10 markers on a map. So far I can only get one marker to show up, the marker of the final address result which means the function is running through the results. Really stuck here and I have tried changing everything.

function initMap(lat, lon) {
  console.log('Calling google maps ....');

  // The location of the city searched
  const city = { lat: lat, lng: lon };
  
  
  //Multiple - Markers on the MAP 
  console.log('Looping through all locations for  google maps ....', locations.length);
  var infowindow = new google.maps.InfoWindow();

  for (var index =0; index < locations.length; index++){
    var myCoords= { lat: locations[index].lat, lng: locations[index].lng };
    // console.log("myCoords", myCoords); 

    var mapOptions = {
        zoom: 14,
        center: myCoords,
    }; 

    const map = new google.maps.Map(document.getElementById('map'), mapOptions);

    // The marker, positioned at the locations searched
    const marker = new google.maps.Marker({
      position: myCoords,
      map: map,
      title: locations[index].title
    });
    // console.log(marker); 
    marker.setMap(map);