Как передать данные модели в Javascript в Django?

Question

Я создаю сайт, на котором я должен показывать на карте разные маркеры, например this . Я сохранил широту, долготу, название города и страны в названии модели City, и теперь мне нужен доступ к данным этой модели в Javascript для добавления маркеров.
Я пытался преобразовать данные Python в JSON, но не смог, потому что понятия не имею, как это сделать. Я искал решения, но все они очень сбивают с толку, поскольку я понятия не имею о преобразовании данных Python в JSON и сериализаторы.

Это код, который у меня есть:

{% extends "map/base.html"%}

{% block content%}

<div id="map"></div>

<script>
var map;
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 30.3753, lng: 69.3451},
        zoom: 6
    });                 
        //declare marker call it 'i'
        var marker, i;
        //declare infowindow
        var infowindow = new google.maps.InfoWindow();
        //add marker to each locations

        var locations = {{marker}}

        for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map,
                icon: locations[i][3]
        });
        //click function to marker, pops up infowindow
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
            }
            })(marker, i));
        }
    } //initmap end
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

{% endblock%}

from django.shortcuts import render
from .models import City
import json
from django.forms.models import model_to_dict
# Create your views here.

def map(request):
    marker = City.objects.all()
    for item in marker:
        print(item)
        item = model_to_dict(item)
    marker = json.dumps(marker)
    context_dict['marker']= marker
    context = {
        'marker': context_dict,
    }
    return render (request, "map/index.html", context)

from django.db import models

class City(models.Model):
    
    country = models.CharField("Country",max_length=100, blank=False)
    city = models.CharField("City",max_length=100, blank=False)
    lan = models.DecimalField("Latitude",max_digits=15, decimal_places=8, blank=False)
    lng = models.DecimalField("Longitude",max_digits=15, decimal_places=8, blank=False)
  
    def __str__(self):
        return self.city +"-"+ self.country

    class Meta:
        # order of drop-down list items
        ordering = ('country',)
        # plural form in admin view
        verbose_name_plural = 'cities'

Answer 1

Хорошо, я бы сделал массивы в массиве, содержащем ваши lan и lng. Тогда я бы отобразил эту переменную как переменную javascript в шаблоне.

def map(request):
    marker = City.objects.all()
    array_of_array = []
    for item in marker:
        array_of_array.append([item.lan,item,lng])
    return render (request, "map/index.html", {'marker': str(array_of_array)})