Question

First of all, I am a newbie at programming. I am trying to make a web page where you have a Google Map embedded, and in this Map you can see a colored line that sets a path.
For this, I am using Django.
In my views.py I have a variable called points, where I have some coordinates written in a list, as a string.
For example,

points = ('-15.4566620,28.07163320','15.7566620,29.07163320',....)

Then, in the google maps script, I have:

var flightPlanCoordinates = [

        new google.maps.LatLng(-15.4566620,28.07163320),
        new google.maps.LatLng(-15.7566620,29.07163320),

                ];

So when I display my page, I see a line between those points.

I would like to have, instead of that, something like:

var flightPlanCoordinates = [

                   {% for point in points %}

                         new google.maps.LatLng({{point}}),

                   {% endfor %}

                ];

But this doesn’t work.

What am I doing wrong, and how should it be?

Thank you very much.

Answer 1

The objective is to get the template to render the path array the same as if it were hardcoded. You should check the rendered webpage’s source code to be sure.

It’s best to remove that trailing comma, even if it does work with it. You can use the forloop.last to omit it in the last point.

I’m following a style as in the polls tutorial. Make sure the view is sending the points variable to the template:

urls.py

urlpatterns contains url(r'^map/$', 'polls.views.map'),

views.py

def map(request):
    points = ('0,0', '10,0', '10,10', '0,10')
    return render_to_response('polls/map.html', { 'points': points })

template map.html

...
var mypolyline = new google.maps.Polyline({
    map: map,
    path: [
      {% for point in points %}
        new google.maps.LatLng({{ point }}) {% if not forloop.last %},{% endif %}
      {% endfor %}
    ]
})