Google Maps API V3: How do I show the direction from point A to point B (blue line)?

Question

I have latitude and longitude for two points in the database, I want the route from point A to point B to be displayed in my Google map ...

Just as we see here (Google Maps Directions)

How to draw a direction line on a map?

Answer 1

Use the Google Maps API v3 Route Service . It is basically the same as the APIs, but it is beautifully packed in the Google Maps API, which also provides a convenient way to easily display the route on the map.

Information and examples of providing route directions on a map can be found in the guidance sections of the Google Maps API v3 documentation.

Answer 2

Using javascript

I created a working demo that shows how to use the Google Maps API Directions service in Javascript through

• DirectionsService object for sending and receiving direction requests
• DirectionsRenderer object for rendering the returned route on a map

 function initMap() { var pointA = new google.maps.LatLng(51.7519, -1.2578), pointB = new google.maps.LatLng(50.8429, -0.1313), myOptions = { zoom: 7, center: pointA }, map = new google.maps.Map(document.getElementById('map-canvas'), myOptions), // Instantiate a directions service. directionsService = new google.maps.DirectionsService, directionsDisplay = new google.maps.DirectionsRenderer({ map: map }), markerA = new google.maps.Marker({ position: pointA, title: "point A", label: "A", map: map }), markerB = new google.maps.Marker({ position: pointB, title: "point B", label: "B", map: map }); // get route from A to B 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); } }); } initMap(); 

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

 <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> <div id="map-canvas"></div> 

Also on Jsfiddle: http://jsfiddle.net/user2314737/u9no8te4/

Using Google Maps Web Services

You can use web services using the API_KEY issuing the request as follows:

https://maps.googleapis.com/maps/api/directions/json?origin=Toronto&destination=Montreal&key=API_KEY

API_KEY can be obtained in the Google Developer Console with a quota of 2500 free requests / days.

A query can return JSON or XML results that can be used to draw a path on a map.

The official documentation for web services using the Google Maps Directions APIs is here.

Answer 3

In your case, this is an implementation using a service.

 function displayRoute() { var start = new google.maps.LatLng(28.694004, 77.110291); var end = new google.maps.LatLng(28.72082, 77.107241); var directionsDisplay = new google.maps.DirectionsRenderer();// also, constructor can get "DirectionsRendererOptions" object directionsDisplay.setMap(map); // map should be already initialized. var request = { origin : start, destination : end, travelMode : google.maps.TravelMode.DRIVING }; var directionsService = new google.maps.DirectionsService(); directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } }); } 

Answer 4

Use the API.

Make ajax ie call

 https://maps.googleapis.com/maps/api/directions/json?parameters 

and then analyze the answer

Answer 5

  // First Initiate your map. Tie it to some ID in the HTML eg. 'MyMapID' var map = new google.maps.Map( document.getElementById('MyMapID'), { center: { lat: Some.latitude, lng: Some.longitude } } ); // Create a new directionsService object. var directionsService = new google.maps.DirectionsService; directionsService.route({ origin: origin.latitude +','+ origin.longitude, destination: destination.latitude +','+ destination.longitude, travelMode: 'DRIVING', }, function(response, status) { if (status === google.maps.DirectionsStatus.OK) { var directionsDisplay = new google.maps.DirectionsRenderer({ suppressMarkers: true, map: map, directions: response, draggable: false, suppressPolylines: true, // IF YOU SET `suppressPolylines` TO FALSE, THE LINE WILL BE // AUTOMATICALLY DRAWN FOR YOU. }); // IF YOU WISH TO APPLY USER ACTIONS TO YOUR LINE YOU NEED TO CREATE A // `polyLine` OBJECT BY LOOPING THROUGH THE RESPONSE ROUTES AND CREATING A // LIST pathPoints = response.routes[0].overview_path.map(function (location) { return {lat: location.lat(), lng: location.lng()}; }); var assumedPath = new google.maps.Polyline({ path: pathPoints, //APPLY LIST TO PATH geodesic: true, strokeColor: '#708090', strokeOpacity: 0.7, strokeWeight: 2.5 }); assumedPath.setMap(map); // Set the path object to the map