Grey box rendered in place of icon on Google Maps-CodePudding

I'm using the Google Maps API in my Django project to display the current users location and this is my first time using maps. The map loads fine, but there's a grey box in place of where the map marker should be(Just over the Au in Australia):

// Initialize and add the map
function initMap() {
// The location of Uluru
const uluru = { lat: -25.344, lng: 131.031 };
// The map, centered at Uluru
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: uluru,
});
// The marker, positioned at Uluru
const marker = new google.maps.Marker({
position: uluru,
map: map,
});
}

window.initMap = initMap;

I've customized the icon to display a different image and only the size of the grey box changed, there are no errors in the console. Any help would be appreciated!

for (i=0; i < venues.length; i  ) {
  const venue = venues[i];
  const position = { lat: venue.latitude, lng: venue.longitude};
  const marker = new google.maps.Marker({
    position: position,
    map: map,
    icon: {
    url: "{% static 'consumer/js/user_map.js' %}",
    scaledSize: {
      width: 32,
      height: 32
      }
    },
  });
}

CodePudding user response：

I was using a template that extended a base.html which had an img property with a grey color set. That is what was covering the marker images on the map.