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.