Incorporating the Google Maps API into my Django project to showcase the current users location is a new endeavor for me. The map loads successfully, however, there's an issue with a grey box appearing instead of the map marker (specifically hovering over the "Au" in Australia):
// Setting up and adding the map
function initMap() {
// Uluru's location
const uluru = { lat: -25.344, lng: 131.031 };
// Map centered at Uluru
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: uluru,
});
// Marker positioned at Uluru
const marker = new google.maps.Marker({
position: uluru,
map: map,
});
}
window.initMap = initMap;
I've attempted to customize the icon with a different image but only noticed a change in the size of the grey box. There are no console errors present. Any guidance on this matter would be greatly 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
}
},
});
}