Add function to html (distanceMatrix service)

Add function to html (distanceMatrix service)

Here I have a probem to write a distance and time beetween two places
based on google map distanceMatrix service
First I write a function calculateDistances(start,stop):
function calculateDistances(start,stop) {
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix(
{
origin: start,
destination: stop,
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, callback);
}
after that I call this function to execute with real values start,stop:
//Start function for calculate distance
var start = document.getElementById("from").value;
var stop = place.formatted_address;
contentStr += '<p>'+ calculateDistances(start,stop); + '</p>';
and finaly I try to write a distance and time into HTML so I write:
$(contentStr).dialog({
modal:true
});
But I dont get anything, when I click on link nothing happend... Why?
In console I get this:
Uncaught ReferenceError: callback is not defined 94:145
calculateDistances 94:145
(anonymous function) 94:215
(anonymous function)
(anonymous function)
(anonymous function)
(anonymous function)
(anonymous function)
(anonymous function)
Io.c
(anonymous function)
How I can solve this problem?