Карты Google не работают в шаблоне Django на сервере разработки App Engine

Когда я добавляю этот скрипт в раздел HEAD простого HTML-файла

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

и запускаю этот скрипт на загрузку тела,

function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

тогда я вижу карту Google просто отлично.

Однако то же самое не работает в шаблоне Django. (Да, я новичок в Django :) Я запускаю весь код в функции инициализации, но карта не отображается. Страница остается пустой.

Я предполагаю, что это как-то связано с Django и сервером разработки GAE, а также с тем, как ссылаются на Google Maps js API, но я не знаю, как это исправить.

Большое спасибо.

Редактировать:

Мой шаблон Django выглядит так (пока нет специальных тегов Django или чего-то подобного).

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    dir="ltr"
    xml:lang="en"
    lang="en">

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="/site_media/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="/site_media/css/main.css" />

    <script src="/site_media/js/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

    <script type="text/javascript">
        $(document).ready(function(event) {
            initialize();
        });

        function initialize() {
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            var myOptions = {
              zoom: 8,
              center: latlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }

    </script>
</head>
<body>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <center>
        <div id="map_canvas" style="width:60%; height:70%;">Why the heck is the map not showing?</div>
    </center>

  </body>
</html>

И отображаемый HTML-код этого шаблона из браузера выглядит так:

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    dir="ltr"
    xml:lang="en"
    lang="en">

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="/site_media/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="/site_media/css/main.css" />

    <script src="/site_media/js/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

    <script type="text/javascript">
        $(document).ready(function(event) {
            initialize();
        });

        function initialize() {
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            var myOptions = {
              zoom: 8,
              center: latlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }

    </script>
</head>
<body>
    <br/>
    <br/>
    <br/>
    <br/>

    <br/>
    <br/>
    <center>
        <div id="map_canvas" style="width:60%; height:70%;">Why the heck is the map not showing?</div>
    </center>

  </body>
</html>

django google-maps google-app-engine django-templates
person Jacques Bosch    schedule 25.06.2010    source источник
comment
Как выглядит ваш шаблон Django? Каков источник страницы при извлечении страницы?   -  person David Underhill    schedule 26.06.2010
comment
@David Underhill: я добавил свой шаблон выше. Вы имеете в виду, как выглядит исходный HTML-код в браузере?   -  person Jacques Bosch    schedule 26.06.2010

Ответы (3)


arrow_upward
1
arrow_downward

Ваш DOCTYPE вызывает проблему. Если я уберу это из вашего кода, карта отобразится.

Есть некоторые обсуждения на Группа Google Maps JavaScript API v3, обсуждающая эту проблему.

person cope360    schedule 29.07.2010
comment
СПАСИБО. У меня не было времени посмотреть на это с тех пор, как я опубликовал это, но это все время беспокоило мой мозг. Это работает отлично. Теперь я могу продолжить. Спасибо, что нашли время, чтобы понять это! - person Jacques Bosch; 30.07.2010

arrow_upward
0
arrow_downward

Я не думаю, что ваша проблема (напрямую) связана с сервером разработки GAE или Django - похоже, что HTML-код вашей страницы загружается нормально.

Я подозреваю, что ваша проблема может быть ссылкой jQuery. Возможно, jQuery не загружается, и поэтому ваш скрипт перестает выполняться, когда пытается получить доступ к $(document), но терпит неудачу, потому что выдается ReferenceError.

Я бы проверил, работает ли ваша ссылка для загрузки библиотеки jQuery, открыв ее вручную в вашем браузере (т. е. перейдите к http://localhost:8080/site_media/js/jquery.min.js (или там, где вы используете сервер разработки) и убедитесь, что он работает). Если нет, исправьте файл app.yaml, чтобы он правильно обслуживал /site_media/js/jquery.min.js.

person David Underhill    schedule 26.06.2010
comment
Спасибо за подсказку, но нет, это не то. Я убедился, что мой jQuery работает и что мой скрипт выполняется. - person Jacques Bosch; 26.06.2010

arrow_upward
0
arrow_downward

У меня было это, я думаю, и я исправил это, просто выполнив инициализацию Карт Google из собственного метода Google:

google.setOnLoadCallback(инициализация);

Я знаю, что пытался сделать это (по умолчанию) в готовом jQuery, но по какой-то причине это не сработало.

person Alper    schedule 24.07.2010
comment
Спасибо за подсказку. Однако я думаю, что этот ответ Copy360 затронул корень проблемы, и поэтому я отметил его как правильный ответ. - person Jacques Bosch; 30.07.2010