javascript-jQuery変数をdjangoテンプレート変数として設定する方法

Googleマップをレンダリングするために、Djangoテンプレート内でjQueryスクリプトを使用しています。目標は、マップ上に複数のマーカーをプロットすることです。私は2つのことを試しました:

> jQuery varをviews.pyでリストとして定義したDjangoテンプレート変数に設定します。この場合、マーカーを作成できませんでした。ただの空白の地図。

var marker = {{marker_list}};

確認のためにページにmarker_listを印刷しましたが、これは前回のテストでこれでした:marker_list = [[‘Chiang Mai Park’、21.0333、21.0333]、[‘Ho Chi Minh Mausoleum’、21.036666667、21.036666667]]
> jQueryスクリプト内でテンプレートタグを使用してforループを作成し、テンプレート変数を使用してリストを作成します。これにより、リストに複数の場所がある場合でも、1つのマーカーのみがプロットされます(上記のmarker_listを参照)。

{%for queryset%}

varマーカー= [
    [{{instance.place_id}}、{{instance.place_lat}}、{{instance.place_long}}]
];

{%endfor%}

完全なコードは、試行2を示しています。 JavaScriptの「変数マーカー」にはリストのリストが必要であることに注意してください。つまり、変数マーカー= [[name1、lattitude1、longitude1]、[name2、lattitude2、longitude2]]。

どんな助けでも大歓迎です。私はDjangoとJavascript n00bの両方です。

views.py

def places_map(request):    
if request.user.is_authenticated():
    queryset = AddLink.objects.filter(user=request.user)
    marker_list = []

    for instance in queryset:
        name = str(instance.location)
        latitude = float(instance.place_lat)
        longitude = float(instance.place_lat)
        marker_list += [[name, latitude, longitude]]

    context = {
        "queryset": queryset,
        "marker_list": marker_list
    }

    return render(request, "places_map.html", context)
else:
    raise Http404("You must be logged in to view places.")

places_map.html

{% extends "base.html" %}
{% load crispy_forms_tags %}
{% load staticfiles %}

<style>
{% block style %}

#map_wrapper {
    height: 400px;
}

#map_canvas {
    width: 100%;
    height: 100%;
}

{% endblock style %}
</style>

{% block content %}

<div class='row' align='center'>
    <h1 id="places-title">Map</h1>

    {% if queryset %}
       <!-- removed -->    
    {% endif %}
</div>

<div id="map_wrapper">
    <div id="map_canvas" class="mapping"></div>
</div>

<!-- For testing -->
{{ marker_list }}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
// Script from http://wrightshq.com/playground/placing-multiple-markers-on-a-google-map-using-api-3/

jQuery(function($) {
    // Asynchronously Load the map API 
    var script = document.createElement('script');
    script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);
});

function initialize() {
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };

    // Display a map on the page
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    map.setTilt(45);

    // Multiple Markers

    {% for instance in queryset %}
    var markers = [
        // ['London Eye, London', 51.503454,-0.119562],
        // ['Palace of Westminster, London', 51.499633,-0.124755],
        // ['Ministry of Sound', 51.498231,-0.118468],
        [{{ instance.place_id }}, {{ instance.place_lat }}, {{ instance.place_long }}]
        ];
    {% endfor %}

    // Info Window Content
    var infoWindowContent = [
        ['<div class="info_content">' +
        '<h3>London Eye</h3>' +
        '<p>The London Eye is a giant...</p>' +        '</div>'],
        ['<div class="info_content">' +
        '<h3>Palace of Westminster</h3>' +
        '<p>The Palace of Westminster is the...</p>' +
        '</div>'],
        ['<div class="info_content">' +
        '<h3>Ministry of Sound</h3>' +
        '<p>Nice place.</p>' +
        '</div>']
    ];

    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), marker, i;

    // Loop through our array of markers & place each one on the map  
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2], markers[i][3]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0]
        });

        // Allow each marker to have an info window    
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));

        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
    }

    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(14);
        google.maps.event.removeListener(boundsListener);
    });

}

</script>

{% endblock content %}
ベストアンサー
これにはJSONを使用する必要があります。

context = {
    "queryset": queryset,
    "marker_list": json.dumps(marker_list)
}

そして、テンプレートでDjangoがシンボルをエスケープしないように安全なフィルターを使用します。

 var markers = {{ marker_list|safe }}

転載記事の出典を記入してください: javascript-jQuery変数をdjangoテンプレート変数として設定する方法 - コードログ