When I add this script to a plain HTML file’s HEAD section <script type=text/javascript

Question

0

Asked: May 16, 20262026-05-16T01:30:32+00:00 2026-05-16T01:30:32+00:00

When I add this script to a plain HTML file’s HEAD section <script type=text/javascript

0

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"></script>

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

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