I am working on a flask + jinja2 website which involves plotting some stored markers on a map.

Python code

resultroute['checkpointlist'] = CheckPoint.query.filter_by(route_id=route.code)
return render_template('routes/edit.html',route=resultroute)

Javascript in edit.html

    function addExistingMarkers() {
        //Individual access to elements
        var name0 = '{{route.checkpointlist[0].name}}';
        var lat0 = {{route.checkpointlist[0].latitude}};
        var long0 = {{route.checkpointlist[0].longitude}};
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng({{ route.checkpointlist[0].latitude }}, {{ route.checkpointlist[0].longitude }}),
          map: map,
          title: '{{ route.checkpointlist[0].name }}'
        });

        //Trying to iterate over the list
        {% for checkpoint in route.checkpointlist %}
            var lat = checkpoint.latitude;
            var long = checkpoint.longitude;
            var cpname = checkpoint.name;
            var location = new google.maps.LatLng(lat, long);

            var marker = new google.maps.Marker({
                  map: map,
                  draggable:true,
                  title:cpname,
                  animation: google.maps.Animation.DROP,
                  position: location,
            });
         {% end for %}
    }

Only one marker is getting placed which is from the individual access of [0] element. But somehow the for loop is not working.

I am working on a flask + jinja2 website which involves plotting some stored markers on a map.

Python code

resultroute['checkpointlist'] = CheckPoint.query.filter_by(route_id=route.code)
return render_template('routes/edit.html',route=resultroute)

Javascript in edit.html

    function addExistingMarkers() {
        //Individual access to elements
        var name0 = '{{route.checkpointlist[0].name}}';
        var lat0 = {{route.checkpointlist[0].latitude}};
        var long0 = {{route.checkpointlist[0].longitude}};
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng({{ route.checkpointlist[0].latitude }}, {{ route.checkpointlist[0].longitude }}),
          map: map,
          title: '{{ route.checkpointlist[0].name }}'
        });

        //Trying to iterate over the list
        {% for checkpoint in route.checkpointlist %}
            var lat = checkpoint.latitude;
            var long = checkpoint.longitude;
            var cpname = checkpoint.name;
            var location = new google.maps.LatLng(lat, long);

            var marker = new google.maps.Marker({
                  map: map,
                  draggable:true,
                  title:cpname,
                  animation: google.maps.Animation.DROP,
                  position: location,
            });
         {% end for %}
    }

Only one marker is getting placed which is from the individual access of [0] element. But somehow the for loop is not working.

• javascript
• python
• flask
• jinja2

2 Answers 2

{% for checkpoint in route.checkpointlist %}
  var lat = {{checkpoint.latitude}};
  var long = {{checkpoint.longitude}};
  var cpname = {{checkpoint.name}};
  var location = new google.maps.LatLng(lat, long);

  var marker = new google.maps.Marker({
    map: map,
    draggable: true,
    title: cpname,
    animation: google.maps.Animation.DROP,
    position: location,
  });
 {% end for %}

You need to include the double braces when referencing variable in a Jinja template.

Your tips helped me to build my JS function,
but I would like to make an adjustment,
you need to use {% endfor %} instead of {% end for %}.