I have created the following code using Google Maps API that should make a direction line on Google Maps between two given addresses. My Code is:
function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 8, center: {lat: -34.397, lng: 150.644} }); var directionsService = new google.maps.DirectionsService(); var directionsDisplay = new google.maps.DirectionsRenderer({ map: map }); var geocoder = new google.maps.Geocoder(); var pointA,pointB; geocoder.geocode({'address': document.getElementById('addressFrom').value}, function(results, status) { var location = results[0].geometry.location; pointA = new google.maps.LatLng(location.lat(),location.lng()); alert(location.lat() + '' + location.lng()); }); geocoder.geocode({'address': document.getElementById('addressTo').value}, function(results, status) { var location = results[0].geometry.location; pointB = new google.maps.LatLng(location.lat(),location.lng()); alert(location.lat() + '' + location.lng()); }); var markerA = new google.maps.Marker({ position: pointA, title: "point A", label: "A", map: map }); var markerB = new google.maps.Marker({ position: pointB, title: "point B", label: "B", map: map }); calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB); } function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB) { directionsService.route({ origin: pointA, destination: pointB, travelMode: google.maps.TravelMode.DRIVING }, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } else { window.alert('Directions request failed due to ' + status); } }); }
<input id="addressFrom" type="textbox" value="Sydney"> <input id="addressTo" type="textbox" value="London"> <input id="submit" type="button" value="Geocode" onclick="initMap"> <div id=