When I add this script to a regular HTML HEAD section
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
and I run this script to load the body,
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 very well.
However, the same does not work if in a Django template. (Yes, I'm new to Django :) I get all the code in the initialization function to run, but the map is not displayed. The page remains blank.
I assume this has something to do with Django and the GAE dev server, as well as how the js API references Google Maps, but I don't know how to fix it.
Thanx a lot.
Edit:
My Django template looks like this: (There are no specific Django tags or anything else.)
<!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 provided HTML for this template from the browser is as follows:
<!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>