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.

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
– Brian Neal, Commented Jan 13, 2012 at 22:34
I see a trailing comma at map: map,. Those make javascript barf. — Brian Neal
– Brian Neal, Commented Jan 13, 2012 at 22:35
@BrianNeal: +1 it always bites python programmers doing javascript. — Paulo Scardine
– 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
– thebeagle, Commented Jan 13, 2012 at 23:02

Brian Neal · Accepted Answer · 2012-01-14 00:18:38Z

3

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.

answered Jan 14, 2012 at 0:18

Brian Neal

32.5k7 gold badges58 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Paulo Scardine · Accepted Answer · 2012-01-14 00:30:31Z

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

edited Jan 14, 2012 at 0:30

answered Jan 14, 2012 at 0:00

Paulo Scardine

78.2k12 gold badges134 silver badges153 bronze badges

2 Comments

thebeagle Over a year ago

I checked out the console and it was giving me an error where there is {% for mark in latest_marks %}

thebeagle Over a year ago

I guess i got it figured out now. I need to serve up the javascript as a template file in Django in order for the javascript to work correctly. Thanks for the tip about firebug though.

Collectives™ on Stack Overflow

Adding Google Map Markers with DJango Template Tags in Javascript

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related