'How to get data from Django Rest Framework to GoogleMaps in JS

I am trying to build a web app which should get data from Django Rest Framework (using Serializer) and pass it to JavaScript and generate markers of GoogleMaps.

When I fetched the data from Django API then JS return me 'Promise'. To create markers on GoogleMaps I need a GeoJson object. Please advise where is my mistake.

Django serializer:

class LocationList(generics.ListAPIView):
    model = Homes
    queryset = Homes.objects.all()
    serializer_class = LocationSerializer

API url:

  HTTP 200 OK
Allow: GET, HEAD, OPTIONS
Content-Type: application/json
Vary: Accept

{
    "type": "FeatureCollection",
    "features": [
        {
            "id": 7,
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    19.2800748,
                    50.2004355
                ]
            },
            "properties": {
                "property_type": 1,
                "name": "Zagłoby",
                "surface": 140.0,
                "price": 5600000.0,
                "home_number": "11",
                "street": "Zagłoby",
                "post_code": "43-600",
                "city": "Jaworzno",
                "country": "Polska",
                "lat_maps": 50.2004355,
                "lng_maps": 19.2800748,
                "add_date": "2022-04-17T15:05:18.274352Z",
                "active": 2
            }
        },

My JS code:

    var endpoint = 'api/location'

async function getLocalization() {
    try {
        const response = await fetch(endpoint);
        return await response.json();
    } catch (error) {
        console.log(error);
    }
}

async function renderLocalization() {
    let address = await getLocalization();
    return address
};


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,
  });
//
  map.data.addGeoJson(renderLocalization())

  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

window.initMap = initMap;

Please help me with how to properly fetch the data so that I can pass it to GoogleMaps.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source