Distance Calculator with map in Django

I had an urgent need to embed a distance teller map into my Django application. I used many pre-made Django modules like GeoDjango etc, but they did not serve my need. Then I used Google map distnce calculator api and tweaked some code of my application to save the distance in database.

So these are all the following changes I made to various files to make my code showing desired results :

class Distance(models.Model):
job =models.IntegerField(editable =False)
dist = models.DecimalField(max_digits=10, decimal_places=3)

class DistanceForm(ModelForm):
class Meta :
model = Distance
exclude= ['job']

def __unicode__(self):
return self.id

Here we create the database table in order to save the distance of a particular site or for a job.


urlpatterns = patterns('Automation.tcc.views',
(r'^map/$', 'distance'), # this maps the url to views function

def distance(request):
#***This is for calculation of distance of the site on the map
job = Job.objects.aggregate(Max('id')) # this is done to get the job for which distance is calculated
jobid =job['id__max']
if jobid== None :
jobid = 1
jobid = jobid +1
if request.method =='POST':
form = DistanceForm(request.POST)
if form.is_valid():
cd = form.cleaned_data
dist = cd['dist'] #get the distance from template
profile = form.save(commit=False)
profile.job = jobid
return render_to_response('tcc/map_ok.html', context_instance=RequestContext(request))

form = DistanceForm()
return render_to_response('tcc/siteinmap.html', {"form": form,}, context_instance=RequestContext(request))


Distance Calculator

#map_canvas {
height: 85%;

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var tcc = new google.maps.LatLng(30.858054,75.861357);
var myOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: tcc

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

function calcRoute() {
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var distanceInput = document.getElementById("distance");
var dist = document.getElementById("dist");
var request = {
travelMode: google.maps.DirectionsTravelMode.DRIVING

directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
distanceInput.value = response.routes[0].legs[0].distance.value / 1000;
sandy.value = response.routes[0].legs[0].distance.value / 1000;


function alertdistance(){
var distancevalue = document.getElementById("dist").value;

{% block content %}

{% if form.errors %}

Please correct the error{{ form.errors|pluralize }} below.

{% endif %}

See the distance of site



Distance (km):

{% csrf_token %}
Distance (km):

{% endblock %}


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s