javascript - Get Markers Addresses in Input fields using Drag-able Google Maps API V3 -
i using google maps api v3 drag-able markers auto-suggest in , field. after clicking show route map 2 markers , b. if alter marker or b shows updated location in navigation (directionspanel). need these locations in new marker address: , new marker address: input fields when markers , b dragged.a , b location. searched on google , read api details did not find solution. need insert these updated marker location (addresses) in database future references. in advance.
<!doctype html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>google map finalized</title> <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } #directionspanel{ overflow-y:auto; width:40%; height:200px; } input[type="text"] { width: 350px; height:30px; } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> var rendereroptions = { draggable: true }; var directionsdisplay = new google.maps.directionsrenderer(rendereroptions);; var directionsservice = new google.maps.directionsservice(); var map; var start_pos = new google.maps.latlng(33.7167,73.0667); function initialize() { var defaultbounds = new google.maps.latlngbounds( new google.maps.latlng(69.386,29.967), new google.maps.latlng(69.3451155,30.3753205) ); var mapoptions = { bounds:defaultbounds, zoom:17, center: start_pos }; map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); var = (document.getelementbyid('from')); var = (document.getelementbyid('to')); var autocomplete = new google.maps.places.autocomplete(from); var autocomplete = new google.maps.places.autocomplete(to); autocomplete.bindto('defaultbounds', map); directionsdisplay.setmap(map); directionsdisplay.setpanel(document.getelementbyid('directionspanel')); google.maps.event.addlistener(directionsdisplay, 'directions_changed', function() { computetotaldistance(directionsdisplay.getdirections()); }); calcroute(); codeaddress(); } function calcroute() { var request = { origin: document.getelementbyid('from').value, destination: document.getelementbyid('to').value, travelmode: google.maps.travelmode.driving }; directionsservice.route(request, function(response, status) { if (status == google.maps.directionsstatus.ok) { directionsdisplay.setdirections(response); } }); } function computetotaldistance(result) { var total = 0; var myroute = result.routes[0]; (var = 0; < myroute.legs.length; i++) { total += myroute.legs[i].distance.value; } total = total / 1000.0; document.getelementbyid('total').innerhtml = total + ' km'; } google.maps.event.adddomlistener(window, 'load', initialize); </script> <script> $(document).ready(function(){ $('button').on('click',initialize); }); </script> </head> <body> <div id="map-canvas" style="float:left;width:60%; height:100%"></div> <div id="from_to"> from: <input id="from" class="controls" type="text" placeholder="enter location"> <br/><br/><hr/> to: <input id="to" class="controls" type="text" placeholder="enter location"> <br/><hr/> <button id="btn_refresh">show route</button> <p>total distance: <span id="total"></span></p> </div> navigation: <div id="directionspanel"> </div> new marker address: <input type="text" id="addressmarker1" size="30"> <br/><br/><hr/> new marker address: <input type="text" id="addressmarker2" size="30"> </body> </html>
try this:
class="snippet-code-js lang-js prettyprint-override">google.maps.event.addlistener(directionsdisplay, 'directions_changed', function() { var directionslist = directionsdisplay.getdirections(); computetotaldistance(directionslist); document.getelementbyid("from").value = directionslist.routes[0].legs[0]["start_address"]; document.getelementbyid("to").value = directionslist.routes[0].legs[0]["end_address"]; });
you can access other values:
class="snippet-code-js lang-js prettyprint-override">//distance document.getelementbyid("distance").value = directionslist.routes[0].legs[0]["distance"]["text"]; //duration document.getelementbyid("duration").value = directionslist.routes[0].legs[0]["duration"]["text"]; //latlng point document.getelementbyid("fromlatlng").value = directionslist.routes[0].legs[0]["start_location"]["k"] + "," + directionslist.routes[0].legs[0]["start_location"]["b"] ; //latlng point b document.getelementbyid("tolatlng").value = directionslist.routes[0].legs[0]["end_location"]["k"] + "," + directionslist.routes[0].legs[0]["end_location"]["b"];
please marked solved if helped
javascript google-maps google-maps-api-3
No comments:
Post a Comment