'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 |
|---|
