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

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

3 голосов
/ 25 июня 2010

Когда я добавляю этот скрипт в раздел 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, а также к ссылкам на js API Карт Google, но я не знаю, как это исправить.

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

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

Мой шаблон 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>

Ответы [ 3 ]

1 голос
/ 29 июля 2010

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

В Google Maps JavaScript API v3 Group , которые обсуждают эту проблему, есть некоторые темы .

0 голосов
/ 24 июля 2010

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

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

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

0 голосов
/ 26 июня 2010

Не думаю, что ваша проблема (напрямую) связана с сервером разработки 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.

.
...