01.<!DOCTYPE html>
02.<html>
03.<head>
04. <title></title>
05. <link rel="stylesheet" type="text/css" href="css/myMap.css">
06.
07. <script type="text/javascript" src="jquery-3.2.1.min.js" ></script>
08. <script src="js/Location.js"></script>
09.</head>
10.<body>
11.
12.
13. <div id="floating-panel">
14. <b>Search: </b>
15. <input type="text" id="end">
16.
17. </div>
18. <div id="map"></div>
19.<!-- Replace the value of the key parameter with your own API key. -->
20. <script async defer
22. </script>
23.
24.</body>
25.</html>
26.
27.
28.
29.
30.function initMap() {
31. var directionsService = new google.maps.DirectionsService;
32. var directionsDisplay = new google.maps.DirectionsRenderer;
33. var map = new google.maps.Map(document.getElementById('map'), {
34. zoom: 7,
35. center: {lat: 13.76172844995000, lng: 100.6527900695800}
36. });
37. directionsDisplay.setMap(map);
38.
39. var onChangeHandler = function() {
40. calculateAndDisplayRoute(directionsService, directionsDisplay);
41. };
42.
43. document.getElementById('end').addEventListener('change', onChangeHandler);
44.}
45.
46.function calculateAndDisplayRoute(directionsService, directionsDisplay) {
47. navigator.geolocation.getCurrentPosition(function(position) {
48. var pos = {
49. lat: position.coords.latitude,
50. lng: position.coords.longitude
51. };
52.directionsService.route({
53. origin: pos["lat"]+","+pos["lng"] ,
54. destination: document.getElementById('end').value,
55. travelMode: 'DRIVING'
56. }, function(response, status) {
57. if (status === 'OK') {
58. directionsDisplay.setDirections(response);
59. } else {
60. window.alert('Directions request failed due to ' + status);
61. }
62. });
63. });
64.}
