Adding Google Map Markers with DJango Template Tags in Javascript

Question

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.

Answer 1

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 comment, you have a trailing comma: map: map,. This will produce an error and halt your script.

Answer 2

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 comma 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')