Google Maps标记显示灰色方框问题求助（Django项目）

我在Django项目中使用Google Maps API展示用户位置，地图加载正常，但本该显示标记的位置（澳大利亚“Au”上方）只出现灰色方框：

// 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;

尝试自定义图标时，只有灰色方框的大小变化，控制台无任何报错：

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
      }
    },
  });
}

问题原因及解决步骤 #

1. 自定义图标路径错误：你把图标url指向了JS文件（user_map.js），Google Maps无法将JS文件渲染为标记图标，因此显示灰色占位框。必须替换为图片文件路径（如PNG、SVG格式）：

   icon: {
     url: "{% static 'consumer/images/marker-icon.png' %}", // 改为你的实际图片路径
     scaledSize: { width: 32, height: 32 }
   }
   

   同时确认Django的STATIC_URL配置正确，图片文件确实存在于指定的static目录中。

2. 默认标记显示灰色的排查方向：

   • 检查Google Maps API密钥是否启用了Maps JavaScript API，且未设置错误的域名限制；
   • 打开浏览器开发者工具的「网络」标签，确认Google Maps默认图标资源是否加载成功（无404或加载失败请求）；
   • 确保API加载脚本格式正确，包含有效的密钥：

     <script async defer src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&callback=initMap"></script>
     

3. 验证图片可访问性：直接在浏览器中访问你设置的图标url，确认能正常显示图片，若无法显示则调整路径直至图片可访问。

内容的提问来源于stack exchange，提问作者JimmyFl0