jquery - Google Maps API V3 - How to change origin and destination points for Direction Service -

jquery - Google Maps API V3 - How to change origin and destination points for Direction Service -

i have no problem setting origin , destination direct services through google maps api. (my code below). how can dynamically alter these values after page loads web site visitors can go on input various from/to points type form fields...?

function directions(map) { /*extended google map directions*/ var = '12345 new york, ny'; var = '12345 indianapolis, in'; var directionsservice = new google.maps.directionsservice(); var directionsdisplay = new google.maps.directionsrenderer(); directionsdisplay.setmap(map); directionsdisplay.setpanel(document.getelementbyid('directions-panel')); var directionsrequest = { origin: from, destination: to, travelmode: google.maps.directionstravelmode.driving, unitsystem: google.maps.unitsystem.metric }; directionsservice.route( directionsrequest, function(response, status) { if (status == google.maps.directionsstatus.ok) { new google.maps.directionsrenderer({ map: map, directions: response }); directionsdisplay.setdirections(response); } else $("#error").append("unable retrieve route<br />"); } ); /**/ } function initialize() { /*google map api v3*/ var map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); var mapoptions = { zoom : 17, center : new google.maps.latlng(39.868041, -86.145084), maptypeid : google.maps.maptypeid.hybrid, backgroundcolor : '#333' }; var marker = new google.maps.marker({ position: mapoptions.center, map: map, title: 'my location' }); //my extended directions map directions(map); settimeout(function(){$('base').prevall().remove();}, 1000); /**/ } function loadscript() { var script = document.createelement('script'); script.type = 'text/javascript'; script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' + 'callback=initialize'; document.body.appendchild(script); } $(window).load(function(){ loadscript(); });

the next google maps setup allows me load map starting point marker. if web user decides submit origin point, info gets sent directionservice calculated , displayed. loading driving steps panel well. hope help in need of setting , recalculating origin , destination points:

call google maps api key

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=api_key"></script>

then utilize following...

var directionsdisplay; var directionsservice = new google.maps.directionsservice(); var map; function initialize() { /*initialize google maps v3*/ directionsdisplay = new google.maps.directionsrenderer(); var npcc = new google.maps.latlng(39.868041, -86.145084); var mapoptions = { zoom : 17, center : npcc, maptypeid : google.maps.maptypeid.hybrid, backgroundcolor:'#333' }; map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); directionsdisplay.setmap(map); directionsdisplay.setpanel(document.getelementbyid('directions-panel')); var marker = new google.maps.marker({ position: mapoptions.center, map: map, title: 'my initial starting point' }); //remove unnecessary styles google maps v3 settimeout(function(){$('base').prevall().remove();}, 1000); /**/ } function calcroute() { /*calculate , display route data*/ var = $('#from').val(); var = '6202 n carrollton ave, indianapolis'; var directionsrequest = { origin: from, destination: to, travelmode: google.maps.travelmode.driving, unitsystem: google.maps.unitsystem.metric }; directionsservice.route(directionsrequest, function(response, status) { if (status == google.maps.directionsstatus.ok) { directionsdisplay.setdirections(response); } else { console.log("unable retrieve route<br />"); } }); /**/ } function getroute() { /*on html form submit, process route data*/ $('#coming-from').submit(function(e){ e.preventdefault(); calcroute(); }); /**/ } google.maps.event.adddomlistener(window, 'load', initialize); $(window).load(function(){ getroute(); });

jquery google-maps-api-3