title: How to write a Javascript function to make MULTIPLE markers show up on a google maps API
body: <p>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.</p>
  <pre><code>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 &lt; locations.length; index++){
      var myCoords= { lat: locations[index].lat, lng: locations[index].lng };
      // console.log(&quot;myCoords&quot;, 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);
  
  </code></pre>