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"></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 nam开发者_运维知识库e="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>
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.
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.
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.
加载中,请稍侯......
精彩评论