Javascript Api和Ajax加载Google地图标记

我尝试使用Ajax和Api从服务器加载带有标记的googlemaps

我什么都试过了，但不知道哪里出了问题

地图已加载，但标记未加载。我还附上了我的Api回复邮递员的照片

请帮帮我。我会很高兴见到你的

代码如下：

$.ajax({
        type: "GET",
        url: 'http://localhost:8000/api/bicykel/',
        dataType: "json",
        success: function (data) {

                $.each(data, function (marker, data) {


                    var latLng = new google.maps.LatLng(data.bicykels.lat, data.bicykels.lng);
                    bounds.extend(latLng);

                    // Creating a marker and putting it on the map
                    var marker = new google.maps.Marker({
                        position: latLng,
                        map: map,
                    });


                    google.maps.event.addListener(marker, 'click', function () {
                      infoWindow.setContent("<div class='pt-5 bg-dark p-4' style='width:300px';>"+"<h3>"+data.bicykels.name+"</h3>" + " " + data.bicykels.name+"</div>");
                      infoWindow.open(map, marker);
                    });

                });



        },
        error: function (data) {
            console.log('Please refresh the page and try again');
        }
    });

def customer_get_bicykel(request):

uzivatel = request.user.id

bicykels = BicykelSerializer(
    Bicykel.objects.filter(),
    many = True,
    context = {"request": request}
).data

return JsonResponse({"bicykels": bicykels})

我还附上api响应屏幕：

---

谢谢你的帮助

您缺少将标记添加到地图的功能。引用谷歌地图JS文档：

// To add the marker to the map, call setMap();
marker.setMap(map);

---

这没用。还是有同样的问题。对我来说，令人惊讶的是，它可以与Api一起工作，但不能与我的Api url一起工作。