google map direction with multiple directions with colors
I need to populate following data on map direction
dataset 1
[
[lat, lon],
[lat, lon],
[lat, lon],
],
dataset 2
[
[lat, lon],
[lat, lon],
[lat, lon],
],
So On ...
All data sets should have route with unique color also any data set can exceed 8 waypoints limit. I able to fix 8 way points limit by following online tutorials like https://lemonharpy.wordpress.com/2011/12/15/working-around-8-waypoint-limit-in-google-maps-directions-api/ and Plotting more than 8 waypoints in Google Maps v3.
But I found no way to get different colored route for each datasets.
This is my code
<style>
#map {
height: 1080px;
width: 100%;
border: 1px solid #000;
}
</style>
<div id="map"></div>
<script>
function initMap() {
//console.log("sdsfsd");
map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: {lat: 28.6247, lng: 77.3731},
disableDefaultUI:true,
//28.6247375!4d77.3731819
});
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer({suppressInfoWindows: true, suppressMarkers: true
});
var response = {"abcd": {"points":
[
[28.5435,77.2051,"2016-07-17 08:02:18 - 28.543500 - 77.205100"],
[28.5313,77.249,"2016-07-17 12:32:38 - 28.531300 - 77.249000"],
[28.5279,77.2462,"2016-07-17 12:35:02 - 28.527900 - 77.246200"],
[28.5328,77.2391,"2016-07-17 12:36:42 - 28.532800 - 77.239100"],
[28.5407,77.24,"2016-07-17 12:38:23 - 28.540700 - 77.240000"],
[28.543,77.2139,"2016-07-17 12:42:36 - 28.543000 - 77.213900"],
[28.5429,77.2095,"2016-07-17 12:43:26 - 28.542900 - 77.209500"],
[28.5332,77.2071,"2016-07-17 12:48:30 - 28.533200 - 77.207100"],
[28.531,77.2113,"2016-07-17 12:52:43 - 28.531000 - 77.211300"],
[28.5315,77.2077,"2016-07-17 13:03:15 - 28.531500 - 77.207700"],
[28.5433,77.2117,"2016-07-17 13:08:27 - 28.543300 - 77.211700"],
[28.5412,77.2374,"2016-07-17 13:12:50 - 28.541200 - 77.237400"],
[28.5311,77.2482,"2016-07-17 17:49:02 - 28.531100 - 77.248200"]
]},
"ret-abcd": {"points":[
[28.5294,77.2502,"2016-07-18 07:29:38 - 28.529400 - 77.250200"],
[28.5541,77.2637,"2016-07-18 07:43:59 - 28.554100 - 77.263700"],
[28.5635,77.2648,"2016-07-18 07:46:08 - 28.563500 - 77.264800"],
[28.5721,77.2579,"2016-07-18 07:48:07 - 28.572100 - 77.257900"],
[28.5746,77.2608,"2016-07-18 07:49:14 - 28.574600 - 77.260800"],
[28.5787,77.2813,"2016-07-18 07:51:16 - 28.578700 - 77.281300"],
[28.5731,77.3086,"2016-07-18 07:52:39 - 28.573100 - 77.308600"],
[28.5902,77.336,"2016-07-18 07:58:00 - 28.590200 - 77.336000"],
[28.6252,77.3735,"2016-07-18 08:49:47 - 28.625200 - 77.373500"]
]
}
};
var timeout = 100;
var m = 0;
var cnt = 0;
var markers = [];
var combinedResults;
var directionsResultsReturned = 0;
var linecolors = ['red', 'blue', 'green', 'yellow'];
for(key in response) {
if(response[key].points.length > 0) {
var blocks = [];
var k = 0;
for(var i=0;i<response[key].points.length;i++) {
if(i != 0 && i % 10 == 0) {
k++;
}
//console.log(k);
if(typeof blocks[k] == 'undefined') {
blocks[k] = [];
}
blocks[k].push(response[key].points[i]);
}
//var ds = [];
//var dd = [];
ds = new google.maps.DirectionsService;
dd = new google.maps.DirectionsRenderer({suppressInfoWindows: true, suppressMarkers: true});
dd.setMap(map);
for(i=0;i<blocks.length;i++) {
/*ds[m] = new google.maps.DirectionsService;
dd[m] = new google.maps.DirectionsRenderer({suppressInfoWindows: true, suppressMarkers: true, polylineOptions: {
strokeColor: linecolors[i]
}});
dd[m].setMap(map);
*/
waypts = [];
markers.push([blocks[i][0][0], blocks[i][0][1], blocks[i][0][2]]);
for(var j=1;j<blocks[i].length-1;j++) {
waypts.push({
location: blocks[i][j][0]+','+blocks[i][j][1],
stopover: true
});
//var myLatlng = new google.maps.LatLng(blocks[i][j][0],blocks[i][j][1]);
markers.push([blocks[i][j][0],blocks[i][j][1],blocks[i][j][2]]);
}
markers.push([blocks[i][blocks[i].length-1][0], blocks[i][blocks[i].length-1][1], blocks[i][blocks[i].length-1][2]]);
//data.start[0]+','+data.start[1],
//ds[m].route({
dd.setOptions({suppressInfoWindows: true, suppressMarkers: true, polylineOptions: {
strokeColor: linecolors[cnt%3]
}});
ds.route({
'origin': blocks[i][0][0]+','+blocks[i][0][1],
'destination': blocks[i][blocks[i].length-1][0]+','+blocks[i][blocks[i].length-1][1],
'waypoints': waypts,
'travelMode': 'DRIVING'
},
function (directions, status){
//console.log(dd[m]);
if (status == google.maps.DirectionsStatus.OK) {
if (directionsResultsReturned == 0) { // first bunch of results in. new up the combinedResults object
combinedResults = directions;
directionsResultsReturned++;
}
else {
// only building up legs, overview_path, and bounds in my consolidated object. This is not a complete
// directionResults object, but enough to draw a path on the map, which is all I need
combinedResults.routes[0].legs = combinedResults.routes[0].legs.concat(directions.routes[0].legs);
combinedResults.routes[0].overview_path = combinedResults.routes[0].overview_path.concat(directions.routes[0].overview_path);
combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(directions.routes[0].bounds.getNorthEast());
combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(directions.routes[0].bounds.getSouthWest());
directionsResultsReturned++;
}
//dd[m].setOptions({suppressInfoWindows: true, suppressMarkers: true, polylineOptions: {
if (directionsResultsReturned == blocks.length) { // we've received all the results. put to map
//dd[m].setDirections(combinedResults);
dd.setDirections(combinedResults);
}
/*dd[m].setDirections(directions);
console.log(i);
console.log(linecolors[i%3])
dd[m].setOptions({suppressInfoWindows: true, suppressMarkers: true, polylineOptions: {
strokeColor: linecolors[i%3]
}});*/
}
}
);
}
}
for(h=0;h<markers.length;h++) {
createMapMarker(map, new google.maps.LatLng(markers[h][0],markers[h][1]), markers[h][2], "", "");
}
cnt++;
}
}
function createMapMarker(map, latlng, label, html, sign) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: "http://www.google.com/mapfiles/marker"+ sign +".png",
title: label,
//zIndex: Math.round(latlng.lat()*-100000)<<5
});
marker.myname = label;
return marker;
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
</script>
key is dataset id
UPDATE : Updated running code, only google api key need to be replaced
Solution
You need to create a DirectionsRenderer for each dataset. If the dataset contains more than 8 waypoints you will need to combine the results from the DirectionsService.
code snippet:
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: {
lat: 28.6247,
lng: 77.3731
},
disableDefaultUI: true,
});
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer({
suppressInfoWindows: true,
suppressMarkers: true
});
var response = {
"abcd": {
"points": [
[28.5435, 77.2051, "2016-07-17 08:02:18 - 28.543500 - 77.205100"],
[28.5313, 77.249, "2016-07-17 12:32:38 - 28.531300 - 77.249000"],
[28.5279, 77.2462, "2016-07-17 12:35:02 - 28.527900 - 77.246200"],
[28.5328, 77.2391, "2016-07-17 12:36:42 - 28.532800 - 77.239100"],
[28.5407, 77.24, "2016-07-17 12:38:23 - 28.540700 - 77.240000"],
[28.543, 77.2139, "2016-07-17 12:42:36 - 28.543000 - 77.213900"],
[28.5429, 77.2095, "2016-07-17 12:43:26 - 28.542900 - 77.209500"],
[28.5332, 77.2071, "2016-07-17 12:48:30 - 28.533200 - 77.207100"],
[28.531, 77.2113, "2016-07-17 12:52:43 - 28.531000 - 77.211300"],
[28.5315, 77.2077, "2016-07-17 13:03:15 - 28.531500 - 77.207700"],
[28.5433, 77.2117, "2016-07-17 13:08:27 - 28.543300 - 77.211700"],
[28.5412, 77.2374, "2016-07-17 13:12:50 - 28.541200 - 77.237400"],
[28.5311, 77.2482, "2016-07-17 17:49:02 - 28.531100 - 77.248200"]
]
},
"ret-abcd": {
"points": [
[28.5294, 77.2502, "2016-07-18 07:29:38 - 28.529400 - 77.250200"],
[28.5541, 77.2637, "2016-07-18 07:43:59 - 28.554100 - 77.263700"],
[28.5635, 77.2648, "2016-07-18 07:46:08 - 28.563500 - 77.264800"],
[28.5721, 77.2579, "2016-07-18 07:48:07 - 28.572100 - 77.257900"],
[28.5746, 77.2608, "2016-07-18 07:49:14 - 28.574600 - 77.260800"],
[28.5787, 77.2813, "2016-07-18 07:51:16 - 28.578700 - 77.281300"],
[28.5731, 77.3086, "2016-07-18 07:52:39 - 28.573100 - 77.308600"],
[28.5902, 77.336, "2016-07-18 07:58:00 - 28.590200 - 77.336000"],
[28.6252, 77.3735, "2016-07-18 08:49:47 - 28.625200 - 77.373500"]
]
}
};
var timeout = 100;
var m = 0;
var cnt = 0;
var markers = [];
var combinedResults;
var directionsResultsReturned = 0;
var linecolors = ['red', 'blue', 'green', 'yellow'];
var colorIdx = 0;
var dd = [];
for (key in response) {
if (response[key].points.length > 0) {
var blocks = [];
var k = 0;
for (var i = 0; i < response[key].points.length; i++) {
if (i != 0 && i % 10 == 0) {
k++;
}
//console.log(k);
if (typeof blocks[k] == 'undefined') {
blocks[k] = [];
}
blocks[k].push(response[key].points[i]);
}
ds = new google.maps.DirectionsService;
for (i = 0; i < blocks.length; i++) {
waypts = [];
markers.push([blocks[i][0][0], blocks[i][0][1], blocks[i][0][2]]);
for (var j = 1; j < blocks[i].length - 1; j++) {
waypts.push({
location: blocks[i][j][0] + ',' + blocks[i][j][1],
stopover: true
});
//var myLatlng = new google.maps.LatLng(blocks[i][j][0],blocks[i][j][1]);
markers.push([blocks[i][j][0], blocks[i][j][1], blocks[i][j][2]]);
}
markers.push([blocks[i][blocks[i].length - 1][0], blocks[i][blocks[i].length - 1][1], blocks[i][blocks[i].length - 1][2]]);
//data.start[0]+','+data.start[1],
//ds[m].route({
ds.route({
'origin': blocks[i][0][0] + ',' + blocks[i][0][1],
'destination': blocks[i][blocks[i].length - 1][0] + ',' + blocks[i][blocks[i].length - 1][1],
'waypoints': waypts,
'travelMode': 'DRIVING'
},
function(directions, status) {
dd.push(new google.maps.DirectionsRenderer({
suppressInfoWindows: true,
suppressMarkers: true,
polylineOptions: {
strokeColor: linecolors[colorIdx++ % 3]
},
map: map
}));
if (status == google.maps.DirectionsStatus.OK) {
dd[dd.length - 1].setDirections(directions);
}
}
);
}
}
for (h = 0; h < markers.length; h++) {
createMapMarker(map, new google.maps.LatLng(markers[h][0], markers[h][1]), markers[h][2], "", "");
}
cnt++;
}
}
function createMapMarker(map, latlng, label, html, sign) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: "http://www.google.com/mapfiles/marker" + sign + ".png",
title: label,
});
marker.myname = label;
return marker;
}
google.maps.event.addDomListener(window, "load", initMap);html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
#map {
height: 100%;
width: 100%;
border: 1px solid #000;
}<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>- ENOLOCK npm ERR! Error while running npm audit fix
- javascript onsubmit not working
- Embed image in email body nodemailer nodejs
- Detect Back Button in Navigation Guards of Vue-Router
- Error: Could not access built-in Node.js modules
- Failed to execute removeChild on Node
- Error: Cannot find module 'node:util' while running the nuxt project using npm run command
- Recharts issue with gaps between Bars
- google closure compiler - double compilation
- Which library should I use for server-side image manipulation on Node.JS?
- Stop propagation of 'click' event in Leaflet
- Creating new objects from frozen parent objects
- How to redirect to an "about:" URL
- How to convert FormData (HTML5 object) to JSON
- dynamically pass unknown number of parameters to react router
- What is the difference between a comparison operator and a logical operator?
- How to convert date to timestamp?
- Context Provider Specification
- Get previous page phonegap javascript
- Displaying date/time in user's timezone - on client side
- Google App Script to imitate File - Import csv file into a sheet using a custom menu item
- Intl.NumberFormat alter minus symbol
- Loading data server side and allow global access client side
- Set default value of Javascript object attributes
- Vue3 @update:modelValue NOT working on objects?
- Failed to resolve component: google-pay-button
- Vue.js 3 - instance without a component?
- When to use const with objects in JavaScript?
- Vue.js iterate complex object by data key
- Vuejs 3 query value in Json Object based on key