Javascript draws directions when taking data from json

Question

This is a very simple question, but please help, because I am trying to solve these 3 days and I have no answer. I try many solutions, but again the same thing.

Here I have nArray functions that return me bigArray JSON that contain objects like this: bigArray

  Array[5] 0: Object 1: Object DISTANCE_FROM_PREVIOUS_OBJECT_LOCATION: 2.087970147789207 lat: "48.866588" leftPosition: 183 lng: "2.309037999999987" topPosition: 57 __proto__: Object 2: Object 3: Object 4: Object length: 5 __proto__: Array[0] 

So, I have an "n" number of objects. All objects contain lat and lng.

I am trying to solve my problem using the main Google example: http://jsfiddle.net/6Vz52/3/ but here I have a problem with how to change the <option value in the Google example with my JSON (lat, lng) data from mine code.

I am trying this code:

 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script> var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var map; function initialize() { directionsDisplay = new google.maps.DirectionsRenderer(); var chicago = new google.maps.LatLng(41.850033, -87.6500523); var mapOptions = { zoom:7, mapTypeId: google.maps.MapTypeId.ROADMAP, center: chicago } map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); directionsDisplay.setMap(map); } function calcRoute() { var start = document.getElementById('start').value; var end = document.getElementById('end').value; var request = { origin:start, destination:end, travelMode: google.maps.DirectionsTravelMode.DRIVING }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } }); } google.maps.event.addDomListener(window, 'load', initialize); </script> 

but I don’t know where and how to place the JSON data (lat, lng) and draw several directions on the map.

How can I show directions on a map with coordinates in my objects?

UPDATE: google code doesn't have to be specified (you can put another google code code and integrate with my json), I just need a solution for direction based on my JSON array

Answer 1

You can put the latitude and longitude in the initial value, separated by a comma. Google accepts this and also puts any search there.

So you have something like:

 var start = lat + ',' + lng; 

If you need to change the parameter value on the fly, you can do this:

 document.getElementById('start').value = lat + ',' + lng; 

Answer 2

Directions Service says

• origin (required) defines the starting location from which to calculate directions. This value can be specified as a string (for example, Chicago, Illinois) or as a LatLng value.

• destination (required) indicates the final location to which directions can be sent. This value can be specified as a string (for example, Chicago, Illinois) or as a LatLng value.

therefore, the actual value of the request or destination source may be similar to "Bondi Beach" or "-33.890542,151.274856" (example)

after fiddle shows a situation similar to yours.

here is the data

 var latLngs = [{ name: 'Bondi Beach', lat: -33.890542, lng: 151.274856 }, { name: 'Coogee Beach', lat: -33.923036, lng: 151.259052 }, { name: 'Cronulla Beach', lat: -34.028249, lng: 151.157507 }, { name: 'Manly Beach', lat: -33.80010128657071, lng: 151.28747820854187 }, { name: 'Maroubra Beach', lat: -33.950198, lng: 151.259302 }]; 

EDIT

You can use waypoints in the destination service for several connected routes.

updated fiddle

hope this helps.

Answer 3

 here is short example: function calculateDistances() { var service = new google.maps.DistanceMatrixService(); for (var a=0; a<=length.array; a++){ service.getDistanceMatrix( { origins: [arr[1][1], arr[1][2]], destinations: [arr[1][3], arr[1][4]], travelMode: google.maps.TravelMode.DRIVING, unitSystem: google.maps.UnitSystem.METRIC, avoidHighways: false, avoidTolls: false }, callback); } } 

full tutorial: https://developers.google.com/maps/documentation/javascript/examples/distance-matrix

Answer 4

Hope this is helpful for you.

https://developers.google.com/maps/documentation/javascript/directions#TravelModes

https://developers.google.com/maps/documentation/javascript/examples/directions-simple

you only need a start and end point, there is no need to draw with all the points. And you want, then you need to attach the path in many parts, for example, from the first point to the second, and attach it to another next and so on until the last point connects ... so I think this is the google object that you just draw between the two points the first and last.

Another way is a polyline, but this is not good for a route, better for flight routes ... I hope you understand. gud luck

Answer 5

here is the fiddle I created with the data given by "shakib"
link to the violin It can solve your needs. although if you need to display a marker on the waypoints, you can do this using

  function addDirection(){ if(i < yourLatLongs.length -1){ var start = yourLatLongs[i].lat+","+yourLatLongs[i].lng; var end = yourLatLongs[i+1].lat+","+yourLatLongs[i+1].lng; var myLatlng = new google.maps.LatLng(yourLatLongs[i].lat,yourLatLongs[i].lng); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: 'Hello World!' }); calcRoute(start,end); console.log(i); i++; } }