How to draw a route between two markers on Google maps

Question

Hi, I am trying to draw a route map between two markers using javascript. I tried various examples found on the Internet, but my map does not load when you test different examples. I can not understand the cause of the error. My map just does not load.

I am trying to route for the following two markers.

<script> function mapLocation() { var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var map; function initialize() { directionsDisplay = new google.maps.DirectionsRenderer(); var chicago = new google.maps.LatLng(37.334818, -121.884886); var mapOptions = { zoom: 7, center: chicago }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); directionsDisplay.setMap(map); } function calcRoute() { var start = new google.maps.LatLng(37.334818, -121.884886); var end = new google.maps.LatLng(38.334818, -181.884886); var request = { origin: start, destination: end, travelMode: google.maps.TravelMode.DRIVING }; directionsService.route(request, function (response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } }); } google.maps.event.addDomListener(window, 'load', initialize); } mapLocation(); </script> 

Can someone please help me draw a route between two markers?

Answer 1

Two comments:

• your question asks about the directions between the markers, but there are no markers in the code you sent. There are two positions defined by LatLng objects. The route service will automatically add tokens at the beginning and end of the route. If you want to get directions between two markers, you first need to add them to the map.
• In the declared code, there is no call to calcRoute (I added the "route" button, which forces it to execute).

Questions:

• the referral service returns ZERO_RESULTS for your starting points, so the route is not drawn. Add a description of the error in the else case for the if (status == "OK") test to see this.
• If I change the points to a place that can actually be routed (Palo Alto, CA), the route route route is not displayed because you never set the "map" property of the route service

working violin

 function mapLocation() { var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var map; function initialize() { directionsDisplay = new google.maps.DirectionsRenderer(); var chicago = new google.maps.LatLng(37.334818, -121.884886); var mapOptions = { zoom: 7, center: chicago }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); directionsDisplay.setMap(map); google.maps.event.addDomListener(document.getElementById('routebtn'), 'click', calcRoute); } function calcRoute() { var start = new google.maps.LatLng(37.334818, -121.884886); //var end = new google.maps.LatLng(38.334818, -181.884886); var end = new google.maps.LatLng(37.441883, -122.143019); var bounds = new google.maps.LatLngBounds(); bounds.extend(start); bounds.extend(end); map.fitBounds(bounds); var request = { origin: start, destination: end, travelMode: google.maps.TravelMode.DRIVING }; directionsService.route(request, function (response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); directionsDisplay.setMap(map); } else { alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status); } }); } google.maps.event.addDomListener(window, 'load', initialize); } mapLocation(); 

snippet of working code:

 function mapLocation() { var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var map; function initialize() { directionsDisplay = new google.maps.DirectionsRenderer(); var chicago = new google.maps.LatLng(37.334818, -121.884886); var mapOptions = { zoom: 7, center: chicago }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); directionsDisplay.setMap(map); google.maps.event.addDomListener(document.getElementById('routebtn'), 'click', calcRoute); } function calcRoute() { var start = new google.maps.LatLng(37.334818, -121.884886); //var end = new google.maps.LatLng(38.334818, -181.884886); var end = new google.maps.LatLng(37.441883, -122.143019); var request = { origin: start, destination: end, travelMode: google.maps.TravelMode.DRIVING }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); directionsDisplay.setMap(map); } else { alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status); } }); } google.maps.event.addDomListener(window, 'load', initialize); } mapLocation(); 

 html, body, #map-canvas { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <script src="https://maps.googleapis.com/maps/api/js"></script> <input type="button" id="routebtn" value="route" /> <div id="map-canvas"></div> 

Answer 2

A lot of mistakes. The first is geolocation. Your second place is wrong, since longitude can only be from +180 to -180, so -181 does not exist on earth! Secondly, as Mr. Upsidown mentioned in a comment, you are calling a function inside a function. First fix the geolocation, and then function calls that should fix the problems you have.