Menu
Is it possible to show an exact route taken in Google Maps API?
Basically I have a list of lat and long coordinates (over 100 points) that I want to use to display the journey taken by someone using the directions API in Google Maps.
For example if I use the start and end coordinates to draw it like so:
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 with only specifying only the start and end coordinates, the route displayed is the shortest route according to Google Maps and not necessarily the actual route taken as it doesn't know what other coordinates were navigated to during the journey. E.g. a person might of used backroads, detoured to somewhere else along the way, etc.
I looked into using the Waypoints part of the API https://developers.google.com/maps/documentation/javascript/examples/directions-waypoints but apparently that is limited to only 10 points, so that isn't really going to cut it...
Is there another way to pass multiple coordinates that can then map out the journey on the map? I'm trying to show a path taken by a person (similar to what you might see on something like Strava).
257
6. To choose an alternate route, either click on a greyed-out route on the map or click on one of the other routes listed on the left-hand side menu. Note that you can also change routes by clicking on one and dragging it so that the directions will take you via certain roads.
Here a quick example how to overcome the 10 waypoints limitation. I tested it with 15 waypoints, but didn't put in any error trapping.
If you search here for "multiple waypoints" you will get many examples, so you can choose that, what fits best to 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>I leave this example, which put two routes, both go the same origin to the same destination, different routes The capture points with a Windows Mobile application, are not very precise but they make the route. Leave the example below. Use more than 10 points to the route
I leave the link of the page where we publish:Ruta
Here declare the varible 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);
});
Here are the variables containing the two routes, new google.maps.LatLng use, to contain the two cordenadas, it 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 painting 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
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
