Please provide the exact route used by Google Maps.

Is it possible to show the exact route done in the Google Maps API?

Basically, I have a list of latitudinal and long coordinates (more than 100 points) that I want to use to display a trip made by someone using the directions APIs on Google Maps.

For example, if I use the start and end coordinates to draw it like this:

var icon1 = 'traffic-green.png'; var icon2 = 'traffic-red.png'; 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, mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true }, map = new google.maps.Map(document.getElementById('map'), myOptions), directionsService = new google.maps.DirectionsService, directionsDisplay = new google.maps.DirectionsRenderer({ map: map, suppressMarkers: true, polylineOptions: { strokeWeight: 4, strokeOpacity: 1, strokeColor: '#ff0000' } }), markerA = new google.maps.Marker({ position: pointA, icon: icon1, map: map }), markerB = new google.maps.Marker({ position: pointB, icon: icon2, 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, avoidTolls: true, avoidHighways: false, 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(); 

The problem is with only the starting and ending coordinates, the displayed route is the shortest route according to Google Maps and not necessarily the actual route, because it does not know which other coordinates were moved to during the trip. For example. a person could use the return paths, hide somewhere else along this path, etc.

I looked through the API waypoints part https://developers.google.com/maps/documentation/javascript/examples/directions-waypoints , but it seems to be limited to only 10 points, so this will not actually be shortened ...

Is there any other way to transmit multiple coordinates, which can then display the journey on a map? I am trying to show the path made by man (similar to what you can see on something like Strava).

+7
google-maps google-maps-api-3
source share
2 answers

Here is a brief example of how to overcome the 10 waypoint limit. I tested it with 15 waypoints, but did not fall into the error trap.

If you are looking for โ€œmultiple waypointsโ€ here, you will get many examples, so you can choose what suits your task.

enjoy Reinhard

 <!DOCTYPE html> <html> <head> <title> Multiple Waypoints </title> <style type="text/css"> #map-canvas { height: 500px }; </style> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.22"></script> <script type="text/javascript"> var map = null; var directionsService = null; function init() { var mapOptions = { center: new google.maps.LatLng(51.429772, 6.83753), zoom: 13, }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); info = document.getElementById('info'); pointsToPath(); } var path = []; function pointsToPath () { var sArray = [ "51.432929,6.806288", "51.432608,6.823883", "51.430039,6.826715", "51.418372,6.82354", "51.41607,6.827402", "51.418158,6.833668", "51.422065,6.839762", "51.420406,6.846113", "51.418693,6.855812", "51.425384,6.85401", "51.431431,6.856413", "51.435283,6.853495", "51.434909,6.838045", "51.434534,6.83135", "51.435604,6.824312" ]; for (var i=0; i < sArray.length; i++) { s = sArray[i].split(","); point = new google.maps.LatLng(s[0],s[1]); path.push(point); } batchJobs(); } var batch = []; var items = 8; function batchJobs() { for (var i=0; i < path.length; i++) { batch.push(path[i]); if (i == items || i == path.length - 1) { calcRoute(); batch = [path[i]]; items += items } } } function calcRoute() { rStart = batch[0]; rEnd = batch[batch.length - 1]; waypoints = []; for (var i = 1; i < batch.length - 2; i++) { waypoints.push({ location: batch[i], stopover: true }); } var request = { origin: rStart, destination: rEnd, waypoints: waypoints, travelMode: google.maps.TravelMode.DRIVING }; directionsService = new google.maps.DirectionsService; poly = new google.maps.Polyline({ map: map }); line = []; directionsService.route(request, function(result, status) { if (status == google.maps.DirectionsStatus.OK) { for(var i = 0, len = result.routes[0].overview_path.length; i < len; i++) { line.push(result.routes[0].overview_path[i]); } poly.setPath(line); } else { alert('Directions request failed due to ' + status); } }); } //calcRoute() google.maps.event.addDomListener(window, 'load', init); </script> </head> <body> <div id="map-canvas"></div> <div id="info" >0 / 0</div> </body> </html> 
+3
source share

I leave this example, which sets two routes, both go the same way with the same destination, different routes Capture points with the Windows Mobile app are not very accurate, but they make the route. Leave an example below. Use over 10 waypoints

I leave a link to the page where we publish: Ruta

Here, declare a variable with map data:

 function initialize() { var myOptions = { center: new google.maps.LatLng(8.984444597839236,-79.56762313842773), zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); }); 

Variables containing two routes are listed here, the new google.maps.LatLng to contain two cordindas is easier

  var ruta = [ new google.maps.LatLng(8.999789020639756, -79.58511114120483), new google.maps.LatLng(8.999587682286911, -79.5849609375), new google.maps.LatLng(8.999158513318694, -79.58561539649963), new google.maps.LatLng(8.997245791109552, -79.58420991897583), new google.maps.LatLng(8.995311865023645, -79.582799077034), new google.maps.LatLng(8.993081214157364, -79.58127021789551), new google.maps.LatLng(8.990983012199813, -79.5797735452652), new google.maps.LatLng(8.989976294823254, -79.57899034023285), new google.maps.LatLng(8.988996067320308, -79.57812130451202), new google.maps.LatLng(8.987703222665113, -79.57686603069305), new google.maps.LatLng(8.98634149195293, -79.57553565502167), new google.maps.LatLng(8.985234088495204, -79.57438230514526), new google.maps.LatLng(8.984222056538217, -79.57348108291626), new google.maps.LatLng(8.98297158382934, -79.5723170042038), new google.maps.LatLng(8.981986038739084, -79.57152307033539), new google.maps.LatLng(8.980883920625757, -79.57071840763092), new google.maps.LatLng(8.979861279187308, -79.57006394863129), new google.maps.LatLng(8.97861079143597, -79.5688247680664), new google.maps.LatLng(8.978192194996502, -79.56818640232086), new google.maps.LatLng(8.977847779842211, -79.56755876541138), new google.maps.LatLng(8.977588143586605, -79.56701695919037), new google.maps.LatLng(8.977360299372414, -79.56672191619873), new google.maps.LatLng(8.977095364059663, -79.56650733947754), new google.maps.LatLng(8.97683042855338, -79.56637859344482), new google.maps.LatLng(8.976501908256823, -79.56630885601044), new google.maps.LatLng(8.974541377720467, -79.5661050081253), new google.maps.LatLng(8.974090984073609, -79.56602990627289), new google.maps.LatLng(8.973905527703572, -79.56594407558441), new google.maps.LatLng(8.973624693591338, -79.5658153295517), new google.maps.LatLng(8.973116012381766, -79.56553101539612), new google.maps.LatLng(8.972904061667313, -79.56541299819946), new google.maps.LatLng(8.9725914341375, -79.56521987915039), new google.maps.LatLng(8.972326495342093, -79.56502139568329), new google.maps.LatLng(8.972024464879365, -79.5647531747818), new google.maps.LatLng(8.971748928097616, -79.56448495388031), new google.maps.LatLng(8.971494586267248, -79.56423282623291), new google.maps.LatLng(8.971245543052296, -79.56403434276581), new google.maps.LatLng(8.970943511689955, -79.56373929977417), new google.maps.LatLng(8.96926908764863, -79.56239819526672), new google.maps.LatLng(8.967440989290688, -79.56092298030853), new google.maps.LatLng(8.96551750195085, -79.55935657024384), new google.maps.LatLng(8.964823348370494, -79.55875039100647), new google.maps.LatLng(8.96348802630202, -79.55767750740051), new google.maps.LatLng(8.96314359719433, -79.55732345581055), new google.maps.LatLng(8.96295283631723, -79.55702304840088), new google.maps.LatLng(8.9627779720919, -79.55667436122894), new google.maps.LatLng(8.96266669481377, -79.55637395381927), new google.maps.LatLng(8.96260840670209, -79.55606818199158), new google.maps.LatLng(8.96260840670209, -79.55571413040161), new google.maps.LatLng(8.962703787243596, -79.55539762973785), new google.maps.LatLng(8.96278856992612, -79.55516695976257), new google.maps.LatLng(8.963021722201072, -79.5548290014267), new google.maps.LatLng(8.96341914050661, -79.55448031425476), new google.maps.LatLng(8.963742373741155, -79.55430865287781), new google.maps.LatLng(8.964176883537672, -79.55424964427948), new google.maps.LatLng(8.964553105014769, -79.55424427986145), new google.maps.LatLng(8.964839245032223, -79.55426037311554), new google.maps.LatLng(8.965321443440464, -79.55424964427948), new google.maps.LatLng(8.96566057160784, -79.55429792404175), new google.maps.LatLng(8.966768034823673, -79.55458760261536), new google.maps.LatLng(8.96711775934803, -79.55448031425476), new google.maps.LatLng(8.967493977778423, -79.55421209335327), new google.maps.LatLng(8.967854299289968, -79.55390095710754), new google.maps.LatLng(8.96852725174363, -79.55327868461609), new google.maps.LatLng(8.969300880582104, -79.55253839492798), new google.maps.LatLng(8.970201679206925, -79.55190539360046), new google.maps.LatLng(8.970975304476767, -79.55148696899414), new google.maps.LatLng(8.971801915956505, -79.55163717269897), new google.maps.LatLng(8.972395379447507, -79.55193758010864), new google.maps.LatLng(8.972798086263662, -79.55204486846924), new google.maps.LatLng(8.973592901036632, -79.55195903778076), new google.maps.LatLng(8.974536078974927, -79.55180883407593) ]; 

Ruta 2

  var ruta2 = [ new google.maps.LatLng(8.97488579601432, -79.55183029174805), new google.maps.LatLng(8.97575478841011, -79.55163717269897), new google.maps.LatLng(8.976178686384351, -79.55120801925659), new google.maps.LatLng(8.976369440311124, -79.55056428909302), new google.maps.LatLng(8.976496609539934, -79.55007076263428), new google.maps.LatLng(8.975055355669639, -79.54981327056885), new google.maps.LatLng(8.97456787144699, -79.54974889755249), new google.maps.LatLng(8.974165166595082, -79.5498776435852), new google.maps.LatLng(8.973762461296193, -79.55011367797852), new google.maps.LatLng(8.973274975336363, -79.55034971237183), new google.maps.LatLng(8.97278748872158, -79.55049991607666), new google.maps.LatLng(8.971091878004616, -79.55114364624023), new google.maps.LatLng(8.970159288733521, -79.55150842666626), new google.maps.LatLng(8.969417454647722, -79.55198049545288), new google.maps.LatLng(8.968823986287543, -79.55258131027222), new google.maps.LatLng(8.967509874323248, -79.55376148223877), new google.maps.LatLng(8.967234334114616, -79.55395460128784), new google.maps.LatLng(8.966895207416961, -79.55425500869751), new google.maps.LatLng(8.966492494052108, -79.55444812774658), new google.maps.LatLng(8.966132171189194, -79.5544695854187), new google.maps.LatLng(8.965114787058173, -79.55438375473022), new google.maps.LatLng(8.96458489836118, -79.55451250076294), new google.maps.LatLng(8.96422457360562, -79.5545768737793), new google.maps.LatLng(8.964076204484742, -79.55479145050049), new google.maps.LatLng(8.963927835303258, -79.55507040023804), new google.maps.LatLng(8.963758270450187, -79.55543518066406), new google.maps.LatLng(8.963864248492628, -79.55584287643433), new google.maps.LatLng(8.964055008891094, -79.5563793182373), new google.maps.LatLng(8.964351747089578, -79.55698013305664), new google.maps.LatLng(8.964627289485389, -79.55773115158081), new google.maps.LatLng(8.965241960230426, -79.55901861190796), new google.maps.LatLng(8.966238148538938, -79.55983400344849), new google.maps.LatLng(8.968082149473005, -79.56129312515259), new google.maps.LatLng(8.974440701542045, -79.55876111984253), new google.maps.LatLng(8.976348245435327, -79.55835342407227), new google.maps.LatLng(8.977831883750271, -79.55813884735107), new google.maps.LatLng(8.978446532131251, -79.55888986587524), new google.maps.LatLng(8.979294321292047, -79.5591688156128), new google.maps.LatLng(8.980078524501028, -79.5590615272522), new google.maps.LatLng(8.980650779826286, -79.55858945846558), new google.maps.LatLng(8.981307812604333, -79.55798864364624), new google.maps.LatLng(8.981986038739084, -79.55777406692505), new google.maps.LatLng(8.982918597602332, -79.55792427062988), new google.maps.LatLng(8.983596820723086, -79.55813884735107), new google.maps.LatLng(8.984126681653088, -79.55818176269531), new google.maps.LatLng(8.98493206878298, -79.55809593200684), new google.maps.LatLng(8.985483122103634, -79.5576024055481), new google.maps.LatLng(8.985864620065477, -79.55691576004028), new google.maps.LatLng(8.98628850621864, -79.55633640289307), new google.maps.LatLng(8.986818363212704, -79.55607891082764), new google.maps.LatLng(8.987305830962828, -79.5559287071228), new google.maps.LatLng(8.988895395156268, -79.55601453781128), new google.maps.LatLng(8.989637189392646, -79.5555853843689), new google.maps.LatLng(8.990209429622622, -79.55507040023804), new google.maps.LatLng(8.991057191264215, -79.55404043197632), new google.maps.LatLng(8.991184355339279, -79.55358982086182), new google.maps.LatLng(8.991057191264215, -79.55331087112427), new google.maps.LatLng(8.99099360920994, -79.55294609069824), new google.maps.LatLng(8.99126913136451, -79.55283880233765), new google.maps.LatLng(8.99173539914851, -79.55298900604248), new google.maps.LatLng(8.991565847296528, -79.55326795578003), new google.maps.LatLng(8.991629429250322, -79.55354690551758), new google.maps.LatLng(8.99304942330933, -79.55507040023804), new google.maps.LatLng(8.99340971942355, -79.55554246902466), new google.maps.LatLng(8.994427024163347, -79.55809593200684), new google.maps.LatLng(8.99538074476034, -79.55865383148193), new google.maps.LatLng(8.996715949374122, -79.55904006958008), new google.maps.LatLng(8.998644569563421, -79.55929756164551), new google.maps.LatLng(9.00163285086937, -79.55983400344849), new google.maps.LatLng(9.002353425646092, -79.56019878387451), new google.maps.LatLng(9.002862065800555, -79.5606279373169), new google.maps.LatLng(9.003179965533809, -79.56120729446411), new google.maps.LatLng(9.003455478409911, -79.56189393997192), new google.maps.LatLng(9.003561444844816, -79.56315994262695), new google.maps.LatLng(9.003794570892316, -79.563889503479), new google.maps.LatLng(9.00385815069738, -79.56470489501953), new google.maps.LatLng(9.004705880363112, -79.56584215164185), new google.maps.LatLng(9.004981392076543, -79.56637859344482), new google.maps.LatLng(9.005193324020915, -79.56706523895264), new google.maps.LatLng(9.00557480120772, -79.56760168075562), new google.maps.LatLng(9.005913891702521, -79.568030834198), new google.maps.LatLng(9.00527809676389, -79.56989765167236), new google.maps.LatLng(9.004875426057769, -79.57103490829468), new google.maps.LatLng(9.004705880363112, -79.57221508026123), new google.maps.LatLng(9.00542644901625, -79.5728588104248), new google.maps.LatLng(9.006295368128981, -79.57279443740845), new google.maps.LatLng(9.006846388923172, -79.57311630249023), new google.maps.LatLng(9.006952354364218, -79.57339525222778), new google.maps.LatLng(9.007227864365555, -79.57365274429321), new google.maps.LatLng(9.007800076774254, -79.57320213317871), new google.maps.LatLng(9.008308709265908, -79.57270860671997), new google.maps.LatLng(9.009114042580409, -79.57270860671997), new google.maps.LatLng(9.010004145734747, -79.57260131835938), new google.maps.LatLng(9.010957825252689, -79.57223653793335), new google.maps.LatLng(9.011233332200337, -79.57159280776978), new google.maps.LatLng(9.011614803011797, -79.57030534744263), new google.maps.LatLng(9.012526092764261, -79.56942558288574), new google.maps.LatLng(9.013183067671367, -79.56886768341064), new google.maps.LatLng(9.007143092079819, -79.57371711730957), new google.maps.LatLng(9.007249057433896, -79.5740818977356), new google.maps.LatLng(9.007121899005282, -79.57438230514526), new google.maps.LatLng(9.007015933613943, -79.57474708557129), new google.maps.LatLng(9.00688877510331, -79.57521915435791), new google.maps.LatLng(9.006698037253514, -79.57558393478394), new google.maps.LatLng(9.005892698555913, -79.57584142684937), new google.maps.LatLng(9.005405255841069, -79.57639932632446), new google.maps.LatLng(9.004981392076543, -79.57738637924194), new google.maps.LatLng(9.004599914263602, -79.57798719406128), new google.maps.LatLng(9.004197242802176, -79.57850217819214), new google.maps.LatLng(9.004070083300151, -79.57869529724121), new google.maps.LatLng(9.00385815069738, -79.58017587661743), new google.maps.LatLng(9.003646217970399, -79.58084106445312), new google.maps.LatLng(9.003349511943936, -79.58135604858398), new google.maps.LatLng(9.002544165787846, -79.58197832107544), new google.maps.LatLng(9.0020779119304, -79.58212852478027), new google.maps.LatLng(9.001463303654447, -79.58245038986206), new google.maps.LatLng(9.0007215336547, -79.58330869674683), new google.maps.LatLng(8.999598279045113, -79.58487510681152), new google.maps.LatLng(9.000000955626966, -79.58521842956543) ]; 

variable declaration description points

  var lineas = new google.maps.Polyline({ path: ruta, map: map, strokeColor: '#222000', strokeWeight: 4, strokeOpacity: 0.6, clickable: false }); var lineas2 = new google.maps.Polyline({ path: ruta2, map: map, strokeColor: '#0000ff', strokeWeight: 4, strokeOpacity: 0.6, clickable: false }); 

HTML

  <body onload="initialize()"> Ruta: Albrook - ciudad del Saber. <br><br> <div id="map_canvas" style="width:99%; height:99%"></div> </body> 

I hope you work.

+2
source share

All Articles