I am trying to add a bunch of map markers to a map using Django template tag variables as the latitude and longitude but things aren't working too well. Here is what I have in the view javascript code. I load the code in as an external JS file. Here is what i have to initialize everything. Also when I did this the google map didn't even show up any more. It disappeared.

 function initialize() {
            var latLng = new google.maps.LatLng(41.85, -87.65);

            map = new google.maps.Map(document.getElementById('map_canvas'), {
                zoom: 8,
                center: latLng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });



             marker = new google.maps.Marker({
                position: latLng,
                title: 'Point A',
                map: map,
                draggable: true
            });

            // Update current position inf o and load in markers from database
            loadMarkers();
            updateMarkerPosition(latLng);
            geocodePosition(latLng);

And here is what loadMarkers() looks like

            function loadMarkers(){
            {% for mark in latest_marks %}
            var point = new google.maps.LatLng({{mark.lat}},{{mark.lng}});
                var marker = new google.maps.Marker({
                position: point,
                map: map,
            });
            {% endfor %}    
        }

Any help would be appreciated. Cheers.

I am trying to add a bunch of map markers to a map using Django template tag variables as the latitude and longitude but things aren't working too well. Here is what I have in the view javascript code. I load the code in as an external JS file. Here is what i have to initialize everything. Also when I did this the google map didn't even show up any more. It disappeared.

 function initialize() {
            var latLng = new google.maps.LatLng(41.85, -87.65);

            map = new google.maps.Map(document.getElementById('map_canvas'), {
                zoom: 8,
                center: latLng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });



             marker = new google.maps.Marker({
                position: latLng,
                title: 'Point A',
                map: map,
                draggable: true
            });

            // Update current position inf o and load in markers from database
            loadMarkers();
            updateMarkerPosition(latLng);
            geocodePosition(latLng);

And here is what loadMarkers() looks like

            function loadMarkers(){
            {% for mark in latest_marks %}
            var point = new google.maps.LatLng({{mark.lat}},{{mark.lng}});
                var marker = new google.maps.Marker({
                position: point,
                map: map,
            });
            {% endfor %}    
        }

Any help would be appreciated. Cheers.

• javascript
• django
• google-maps
• django-templates

• 1 The second code snippet you posted is being generated by Django in your template? Or is that in your javascript file? (sorry, had to ask) – Brian Neal Commented Jan 13, 2012 at 22:34
• 3 I see a trailing ma at map: map,. Those make javascript barf. – Brian Neal Commented Jan 13, 2012 at 22:35
• 1 @BrianNeal: +1 it always bites python programmers doing javascript. – Paulo Scardine Commented Jan 13, 2012 at 22:57
• Both code snippets are in the one javascript file. Am I not able to use template tags in other parts of the webpage besides the template html files? – thebeagle Commented Jan 13, 2012 at 23:02

2 Answers 2

You can't put Django template tags inside external javascript files. Django doesn't even see those. Your webserver serves those directly to the client.

What you can do is use Django to generate Javascript variables and data structures, e.g. inside <script> tags in your template, and then your external javascript files can reference those just fine.

E.g. in your template, you can have Django generate:

<script>var myVar = {something: 42};</script>

And your external javascript file can then make use of myVar. I do this a lot to customize the behavior of external javascript scripts.

And, as I mentioned in the ment, you have a trailing ma: map: map,. This will produce an error and halt your script.

Most likely you have an error in your javascript code that is preventing google maps api from executing. Your code has indeed an easy to spot javascript error: as Brian Neal pointed, the dict literal in python is very similar to the object literal in ecmascript, but there is a subtle distinction:

While python allows for an extra ma after the last element, javascript does not.

This works in python:

{ 
   'position': point, 
   'map': map, 
}

But in javascript this fails with a syntax error:

{ 
   position: point, 
   map: map, 
}

Fix this and try again.

Every modern web browser has decent javascript debugging resources. Chrome has a very nice one, and Firefox has firebug (last incarnations of IE are also quite decent). If you need further help, look at the javascript console and tell us what errors are you seeing.

[edited]

In order to have the django template tags interpreted you have to serve your javscript file from a django view, not from static files.

in the urls.py, include an entry for the javascript:

      (r'jsresources/latest_points.js', 'yourappname.views.latest_points') 

in yourappname/views.py do something like:

def latest_points(request):
    latest_points = YourPointsModel.objects.order_by('-id')[100]
    return render_to_response('latest_points.js', locals(), mimetype='text/javascript')