How can I add multiple markers to my Google map using data from database?

My js code:

function initMap() {
  const myLatLng = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: myLatLng,
  });

  new google.maps.Marker({
    position: myLatLng,
    map,
    title: "Hello World!",
  });
}

// Adds a marker to the map and push to the array.
function addMarker(position) {
  marker_f = Markers.objects.all()
  const marker = new google.maps.Marker({
    Markers from models,
    map,
  });

  markers.push(marker);
}

My models.py code:

from django.db import models
from django.core.validators import MaxValueValidator, MinValueValidator
# Create your models here.
class Markers(models.Model):
    area = models.CharField(max_length=100)
    latitude = models.FloatField(
        validators=[MinValueValidator(-90), MaxValueValidator(90)],
)
    longitude = models.FloatField(
        validators=[MinValueValidator(-180), MaxValueValidator(180)],
)

Tutorials used for generating this code:

https://developers.google.com/maps/documentation/javascript/examples/marker-remove https://developers.google.com/maps/documentation/javascript/examples/marker-simple

I don't want to hardcode my coords in js like in the example below, I would like to add them via my admin page in django with models.py variable to show markers on my map in html https://developers.google.com/maps/documentation/javascript/examples/icon-complex