I've created a pop-up modal that shows a google map that displays a found place with the findPlaceFromQuery Method. This works, but I have tried to add multiple markers on the map with the same method but it doesn't work. I think the places have to be put in some sort of array to work properly. Do you have any ideas? I will put my code below and an screenshot of the map.

    let map;
    let service;
    let infowindow;
    
    function initMap() {
      const england = new google.maps.LatLng(52.3555, 1.1743);
    
      infowindow = new google.maps.InfoWindow();
      map = new google.maps.Map(document.getElementById("map_canvas"), {
        center: england,
        zoom: 20,
        mapTypeId: 'hybrid'
      });
    
      var request = {
        query: "Oliver Bonas",
        fields: ["name", "geometry"],
      };
    
      service = new google.maps.places.PlacesService(map);
      service.findPlaceFromQuery(request, (results, status) => {
        if (status === google.maps.places.PlacesServiceStatus.OK && results) {
          for (let i = 0; i < results.length; i++) {
            createMarker(results[i]);
          }
    
          map.setCenter(results[0].geometry.location);
        }
      });
    }
    
    function createMarker(place) {
      if (!place.geometry || !place.geometry.location) return;
    
      const marker = new google.maps.Marker({
        map,
        position: place.geometry.location,
        
      });
    
      google.maps.event.addListener(marker, "click", () => {
        infowindow.setContent(place.name || "");
        infowindow.open(map);
      });
    }
    
    $('#mapModal').on('show.bs.modal', function(event) {
        initMap();
        $("#location-map").css("width", "100%");
        $("#map_canvas").css("width", "100%");
        });