Add custom value to google map directons - wordpress

Question

How can i read custom field value and set as start & end in order to display google direction
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var waypts = [];
var checkboxArray = document.getElementById('waypoints');
for (var i = 0; i < checkboxArray.length; i++) {
if (checkboxArray.options[i].selected == true) {
waypts.push({
location:checkboxArray[i].value,
stopover:true});
}
}
In wordpress post i have 2 custom fields with start and destination value and i wish to read values and add to function calcroute() in order to display that route on google maps.
my entire code (below) display only centred view of Chicago
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom: 6,
center: chicago
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
var start = document.getElementById('plecare_din').value;
var end = document.getElementById('destinatie').value;
var waypts = [];
var checkboxArray = document.getElementById('waypoints');
for (var i = 0; i < checkboxArray.length; i++) {
if (checkboxArray.options[i].selected == true) {
waypts.push({
location:checkboxArray[i].value,
stopover:true});
}
}
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
};
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Answer 1

you have to trigger the calcRoute() somewhere
I have a working sample here in jsfiddle:
http://jsfiddle.net/th9kwzdr/1/