tags:

views:

156

answers:

3
+2  Q: 

Google Maps not working in Django template on App Engine development server

When I add this script to a plain HTML file's HEAD section

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

and I run this script on the body onload, 

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

then I see the Google map just fine.

However, the same does not work when in a Django template. (Yes, I am new to Django :) I get all the code in the initialize function to run, but no map shows up. Page stays blank.

I assume it has something to do with Django, and the GAE dev server, and how the Google Maps js API is referenced, but I don't know how to fix.

Thanx much.

Edit:

My Django template looks like this (There are no Django specific tags or anything yet.)

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<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"&gt;&lt;/script&gt;

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

And the rendered HTML source of that template from the browser looks like this:

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<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"&gt;&lt;/script&gt;

    <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>
A: 

I don't think your problem is (directly) related to the GAE development server or Django - it looks like your page's HTML is loading just fine.

I suspect your problem may be the jQuery reference. Perhaps jQuery is not being loaded, and thus your script stops executing when it tries to access $(document) but fails because a ReferenceError is thrown.

I would check that your link to load the jQuery library is working by manually accessing it in your browser (i.e., browse to http://localhost:8080/site_media/js/jquery.min.js (or wherever you are running your development server) and make sure it works). If not, then fix your app.yaml file so that it is properly setup to serve /site_media/js/jquery.min.js.

David Underhill  2010-06-26 13:57:53
Thanx for the tip, but no its not that. I did verify that my jQuery works and that my script is executing.
Jacques Bosch  2010-06-26 19:06:28
A: 

I've had this I think and I fixed it by just doing the Google Maps initialize from google's own method:

google.setOnLoadCallback(initialize);

I know I tried to do this (by default) in jQuery's ready but that didn't work for some reason.

alper  2010-07-24 10:39:06
@alper: Thanx for the tip. I think though that cope360's answer hit the root of the problem and so I marked his as the right answer.
Jacques Bosch  2010-07-30 17:02:56
+1  A: 

Your DOCTYPE is causing the problem. If I remove that from your code, then the map displays.

There are some threads on the Google Maps JavaScript API v3 Group that discuss this problem.

cope360  2010-07-29 19:53:45
@cope360: THANX. I haven't had time to look at this since I posted it, but it's been bugging my brain all the while. It works perfectly. Now I can continue. Thanx for taking the time to figure this out!
Jacques Bosch  2010-07-30 17:01:40

related questions

Django: Print url of view without hardcoding the url
Django Calendar Widget?
Can the HTTP version or headers affect the visual appearance of a web page?
Project design / FS layout for large django projects
Extending the User model with custom fields in Django
How to generate urls in django
Always including the user in the django template context
Screencasts for Django/Python?
Using Django time/date widgets in custom form
How do I add data to an existing model in Django?
Setup django with WSGI and apache
Altering database tables in Django
Django Templates and variable attributes.
Django ImageField core=False in newforms admin
How can I render a tree structure (recursive) using a django template?
Cleanest & Fastest server setup for Django
Unicode vs UTF-8 confusion in Python / Django?
Does Hostmonster support Django
Specifying a mySQL ENUM in a Django model
Represent Ordering in a Relational Database
updating an auto_now DateTimeField in a parent model w/ Django
Version track, automate DB schema changes with django
Learning Ruby on Rails any good for Grails?
What Hosting Service is best for Django applications?
Class views in Django