javascript - calculate distance before submitting form -
i trying calculate distance workplace destination varies. have form 3 fields: date destination distance distance typing in destination address - should happen before submit form (for best user experience). trying utilize google maps api can't input in destination field js code var destinationa. using "onchange" inout before submitting.
my next step distance result form field distance.
any help much appreciated.
here test-site: www.e-kl.dk/s/_kort.asp
here code:
<%@language="vbscript" codepage="1252"%> <!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"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>test</title> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> <style> html, body { height: 100%; margin: 0; padding: 0; } #map-canvas { height: 200px; width: 200px; position: absolute; left: 3px; top: 92px; z-index: 1; } #content-pane { float:right; width:48%; padding-left: 2%; } #outputdiv { font-size: 11px; height: 50px; width: 876px; position: absolute; left: 0px; } </style> </head> <script> var map; var geocoder; var bounds = new google.maps.latlngbounds(); var markersarray = []; var origin1 = 'gl. hovedgade 10, denmark'; // var destinationa = 'ballerup'; //this works need user input.... // var destinationa = document.form1.destination; //did not work // var addressfield = document.getelementbyid('destination'); //did not work // var destinationa = addressfield.value; // var destinationa = $("#destination").val(); //did not work var destinationicon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=d|ff0000|000000'; var originicon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=o|ffff00|000000'; function initialize() { var opts = { center: new google.maps.latlng(55.876, 12.5), zoom: 15 }; map = new google.maps.map(document.getelementbyid('map-canvas'), opts); geocoder = new google.maps.geocoder(); } function calculatedistances() { var service = new google.maps.distancematrixservice(); service.getdistancematrix( { origins: [origin1], destinations: [destinationa], travelmode: google.maps.travelmode.driving, unitsystem: google.maps.unitsystem.metric, avoidhighways: false, avoidtolls: false }, callback); } function callback(response, status) { if (status != google.maps.distancematrixstatus.ok) { alert('error was: ' + status); } else { var origins = response.originaddresses; var destinations = response.destinationaddresses; var outputdiv = document.getelementbyid('outputdiv'); outputdiv.innerhtml = ''; deleteoverlays(); (var = 0; < origins.length; i++) { var results = response.rows[i].elements; addmarker(origins[i], false); (var j = 0; j < results.length; j++) { addmarker(destinations[j], true); outputdiv.innerhtml += 'tegnestuen' + ' til ' + destinations[j] + ': ' + results[j].distance.text; } } } } function addmarker(location, isdestination) { var icon; if (isdestination) { icon = destinationicon; } else { icon = originicon; } geocoder.geocode({'address': location}, function(results, status) { if (status == google.maps.geocoderstatus.ok) { bounds.extend(results[0].geometry.location); map.fitbounds(bounds); var marker = new google.maps.marker({ map: map, position: results[0].geometry.location, icon: icon }); markersarray.push(marker); } else { alert('geocode not successful next reason: ' + status); } }); } function deleteoverlays() { (var = 0; < markersarray.length; i++) { markersarray[i].setmap(null); } markersarray = []; } google.maps.event.adddomlistener(window, 'load', initialize); </script> <body> <div id="outputdiv"> <form id="form1" name="form1" method="post" action=""> date <input name="date" type="text" value="" id="date"/> destination <input name="destination" type="text" value="" id="destination" onchange="calculatedistances();"/> distance <input name="distance" type="text" value="" id="distance" /> </form> </div> <div id="map-canvas"></div> </body> </html>
you can't access document.getelementbyid('destination') until onload event has fired. best value in calculatedistances function (when needed):
function calculatedistances() { var addressfield = document.getelementbyid('destination'); //did not work var destinationa = addressfield.value; var service = new google.maps.distancematrixservice(); service.getdistancematrix({ origins: [origin1], destinations: [destinationa], travelmode: google.maps.travelmode.driving, unitsystem: google.maps.unitsystem.metric, avoidhighways: false, avoidtolls: false }, callback); } working fiddle
javascript google-maps-api-3 onchange form-fields
No comments:
Post a Comment