I'm using a jQuery script inside of a Django template in order to render a Google Map. The goal is to plot multiple markers on the map. I've tried two things:

1. Set the jQuery var to a Django template variable, which I defined as a list in views.py. Was not able to produce any markers in this case. Just a blank map.

var markers = {{ marker\_list }};

I printed marker\_list on the page to confirm, which was this in my last test: marker\_list = [['Chiang Mai Park', 21.0333, 21.0333], ['Ho Chi Minh Mausoleum', 21.036666667, 21.036666667]]
2. Make a for loop with template tags inside the jQuery script, and build the list with template variables. With this, only one marker will plot, even if there are multiple locations in the list (see marker\_list above).

{% for instance in queryset %}

var markers = [
 [{{ instance.place\_id }}, {{ instance.place\_lat }}, {{ instance.place\_long }}]
];

{% endfor %}

Full code is below showing attempt #2. Note that "var markers" in the javascript requires a list of a lists. i.e. var markers = [[name1, latitude1, longitude1], [name2, latitude2, longitude2]].

Any help would be much appreciated. I'm both a Django and 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 %}

```