How do i display multiple pins on google geocoding maps from within a flask application using pymongo?

Question

I have multiple addresses stored on a mongoDB database that i call using pymongo and display in my application using a {% for address in events %} syntax.

I also have a google geocode map and api key established and am able to take an input and drop a pin on the map as required.

However, I want to display a pin for all the addresses returned from the mongoDB database but I do not know how to pass those into the javascript function.

The javascript code is as follows:

 <script>
    let map;
    let marker;
    let geocoder;
    let responseDiv;
    let response;
    
    function initMap() {
      map = new google.maps.Map(document.getElementById("map"), {
        zoom: 8,
        center: { lat: 53.430759, lng: -2.961425 },
        mapTypeControl: false,
      });
      geocoder = new google.maps.Geocoder();
    
      const inputText = document.createElement("input");
    
      inputText.type = "text";
      inputText.placeholder = "Enter a location";
    
      const submitButton = document.createElement("input");
    
      submitButton.type = "button";
      submitButton.value = "Geocode";
      submitButton.classList.add("button", "button-primary");
    
      const clearButton = document.createElement("input");
    
      clearButton.type = "button";
      clearButton.value = "Clear";
      clearButton.classList.add("button", "button-secondary");
      response = document.createElement("pre");
      response.id = "response";
      response.innerText = "";
      responseDiv = document.createElement("div");
      responseDiv.id = "response-container";
      responseDiv.appendChild(response);
    
      const instructionsElement = document.createElement("p");
    
      instructionsElement.id = "instructions";
      instructionsElement.innerHTML =
        "<strong>Instructions</strong>: Enter an address in the textbox to geocode or click on the map to reverse geocode.";
      map.controls[google.maps.ControlPosition.TOP_LEFT].push(inputText);
      map.controls[google.maps.ControlPosition.TOP_LEFT].push(submitButton);
      map.controls[google.maps.ControlPosition.TOP_LEFT].push(clearButton);
      map.controls[google.maps.ControlPosition.LEFT_TOP].push(instructionsElement);
      map.controls[google.maps.ControlPosition.LEFT_TOP].push(responseDiv);
      marker = new google.maps.Marker({
        map,
      });
      map.addListener("click", (e) => {
        geocode({ location: e.latLng });
      });
      submitButton.addEventListener("click", () =>
        geocode({ address: inputText.value })
      );
      clearButton.addEventListener("click", () => {
        clear();
      });
      clear();
    }
    
    function clear() {
      marker.setMap(null);
      responseDiv.style.display = "none";
    }
    
    function geocode(request) {
      clear();
      geocoder
        .geocode(request)
        .then((result) => {
          const { results } = result;
    
          map.setCenter(results[0].geometry.location);
          marker.setPosition(results[0].geometry.location);
          marker.setMap(map);
          return results;
        })
        .catch((e) => {
          alert("Geocode was not successful for the following reason: " + e);
        });
    }
  </script>

and the pymongo method is as follows:

def home():
event=mongo.db.community_events_map.find().sort('event_date'))

Any help would be greatly appreciated.