Using Django Variable in Javascript to use with Google API
I am developing a Django Application that takes a location on one page and searches the database for real estate listings in that area and returns the results on the next page. The Second page also displays location entered in page 1 i want to know what is going wrong with my code i am access the value of that variable through 'ghar' object and storing it in a variable called address in javascript My Header scripts and html file are
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type=text/javascript" src="{{ MEDIA_URL }}maps.js"></script>
.....
<div id="map_canvas"></div>
My maps.js file is
var geocoder;
var map;
var address ="{{ghar.place}}";
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 11,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function codeAddress() {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.ma开发者_JAVA百科ps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
ghar is the name of the object that has the place attribute stored in the database by django models
I HAVE MADE A FEW CHANGES TO THIS This is what i am currently stuck at
ok...i tried doing this thing... i have placed my Jquery javascript in the HTML file itself the HTML file is
<!DOCTYPE HTML>
<html>
<head><title>Ghar Nivas</title>
<link type="text/css" rel="stylesheet" href="{{ MEDIA_URL }}searchresult.css" />
<link type="image/png" rel="icon" href="{{ MEDIA_URL }}gharnivaslogo.png">
<script type="text/javscript" src="{{ MEDIA_URL }}jquery.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var address = {{ area }};
var geocoder;
var map;
function codeaddfunc(){
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 11,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
geocoder.geocode( { 'address': address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
}
</script>
</head>
<body class="back" onload="codeaddfunc()">
<div align="right" ><a href="/">Home</a></div>
<img height="180" width="500" src="{{ MEDIA_URL }}ghar.png" alt="logo here"/>
<table >
<tr valign = "top" >
<td width="20%" >
<h3 class="whitecolor">Search</h3>
<label class="whitecolor">Price Range</label>
<form action="/second_search/" method="get" >
<div class="whitecolor" >
From: <input type="text" name="fromRange" placeholder="5000" id="fromRange" style="width:100px;" /> <br/>
To: <input type="text" name="toRange" placeholder="10000" id="toRange" style="width:100px;" />
</div>
<br />
<div class="whitecolor" >
Specify Area: <input type="text" name="txtSearch" id="txtSearch" style="width:100px;" />
</div>
<input type="submit" value="Search Again" />
</form>
</td>
<td bgcolor="#FFFFFF"><br/></td>
<td>
<div>
<table width="500px">
<tr>
<td>
{% if ghar %}
{% for g in ghar %}
<div class="whitecolor" >
<a href="/venture/{{ g.id }}/">{{ g.nameOfVenture }}</a> <br/>
Location: {{ g.place }}<br/>
Price: {{ g.price }}
Ownner Name: {{ g.ownerName }}<br/>
Owner Contact: {{ g.ownerContact }}<br/>
</div>
<hr />
{% endfor %}
{% else %}
<p class="whitecolor" >No gharnivas matched your search criteria.</p>
{% endif %}
</td>
</tr>
</table>
</div>
</td>
<td >
<div id="map_canvas"></div>
</td>
</tr>
</table>
</body>
</html>
even on going to this page and "viewing the source" the value of the variable address comes as the one specified in the previous page as i have created a global variable in django called area
YET the corresponding map does not show up in the HTML page
What do you think is the reason for this? where am i going wrong
Is your Javascript file processed by Django at all? If you are using the staticfiles application, or letting your web server directly serve the static files, your variable will never be substituted.
You have two choices:
- either serve JS code which is created dinamically
- or declare a global variable.
For the former option, you can do something like this (that reference is for CSV files, but it would work for any other content type). This would have the disadvantage that you have to regenerate your whole JS files each time for that variable.
For the latter option you can do something like this in your template
<script type=text/javascript">var address = "{{ ghar.place|escapejs }}";</script>
As a variant, instead of using a global variable, you can pass it as an argument to a function.
加载中,请稍侯......
精彩评论