Добавление маркеров карты Google с тегами шаблона DJango в Javascript

Question

Я пытаюсь добавить на карту набор маркеров карты, используя переменные тега шаблона Django в качестве широты и долготы, но все работает не очень хорошо.Вот то, что я имею в представлении кода JavaScript.Я загружаю код в виде внешнего файла JS.Вот что я должен инициализировать все.Также, когда я сделал это, карта Google даже больше не появлялась.Он исчез.

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

А вот как выглядит loadMarkers ()

            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 %}    
        }

Любая помощь будет принята с благодарностью.Приветствия.

Answer 1

Вы не можете помещать теги шаблонов Django во внешние файлы javascript. Джанго их даже не видит. Ваш веб-сервер обслуживает их напрямую клиенту.

Что вы можете сделать, это использовать Django для генерации переменных Javascript и структур данных, например, внутри <script> тегов в вашем шаблоне, и тогда ваши внешние файлы javascript могут ссылаться на них просто отлично.

например. в вашем шаблоне вы можете настроить Django:

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

И ваш внешний файл javascript может затем использовать myVar. Я делаю это много, чтобы настроить поведение внешних сценариев JavaScript.

И, как я уже упоминал в комментарии, у вас есть запятая: map: map,. Это приведет к ошибке и остановит ваш скрипт.

Answer 2

Скорее всего, в вашем коде JavaScript есть ошибка, которая препятствует выполнению API карт Google. В вашем коде действительно легко обнаружить ошибку javascript: как отметил Брайан Нил, литерал dict в python очень похож на литерал объекта в ecmascript, но есть тонкое различие:

Хотя python допускает дополнительную запятую после последнего элемента, javascript нет.

Это работает в Python:

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

Но в javascript это не получается с синтаксической ошибкой:

{ 
   position: point, 
   map: map, 
}

Исправьте это и попробуйте снова.

Каждый современный веб-браузер имеет приличные ресурсы для отладки javascript. У Chrome есть очень хороший вариант, а у Firefox есть firebug (последние воплощения IE также вполне приличны). Если вам нужна дополнительная помощь, посмотрите на консоль javascript и сообщите нам, какие ошибки вы видите.

[редактировать]

Чтобы интерпретировать теги шаблонов django, вы должны обслуживать свой файл javscript из представления django, а не из статических файлов.

в urls.py, включите запись для JavaScript:

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

в yourappname / views.py сделать что-то вроде:

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