0👍
I have faced this issue before and this will help you:
first of all you need to add waypoints and optimizeWaypoints keys to directionsService.route in DirectionsRenderer.js file
after that you need to bind this keys to DirectionsRenderer component in your project, as well as you need to create an array called waypnt in your component file and push all Destination points and stopover: true key on it like this:
this.waypnt.push({
location: { lat: marker.lat, lng: marker.lng },
stopover: true,
});
look at this:
DirectionsRenderer.js
import { MapElementFactory } from "vue2-google-maps";
export default MapElementFactory({
name: "directionsRenderer",
ctr() {
return window.google.maps.DirectionsRenderer;
},
events: [],
mappedProps: {},
props: {
origin: { type: [Object, Array] },
destination: { type: [Object, Array] },
waypoints: {type: Array},
travelMode: { type: String },
optimizeWaypoints: {type: Boolean}
},
afterCreate(directionsRenderer) {
let directionsService = new window.google.maps.DirectionsService();
this.$watch(
() => [this.origin, this.destination, this.travelMode, this.waypoints, this.optimizeWaypoints],
() => {
let { origin, destination, travelMode, waypoints, optimizeWaypoints } = this;
if (!origin || !destination || !travelMode || !waypoints) return;
directionsService.route(
{
origin,
destination,
travelMode,
waypoints,
optimizeWaypoints,
},
(response, status) => {
if (status !== "OK") return;
directionsRenderer.setDirections(response);
}
);
}
);
},
});
MapContainer.vue
<template>
<div class="hello">
<h1 class="mb-4">Map Project</h1>
<div class="row">
<div class="col-md-9">
<!-- Adding Company Location: start -->
<div class="company-location">
<b-form>
<b-input-group class="mb-3">
<GmapAutocomplete @place_changed="originPoint" />
<b-input-group-append class="ms-2">
<b-button class="btn-success" @click="addOriginPoint">
Add Location
</b-button>
</b-input-group-append>
</b-input-group>
</b-form>
</div>
<!-- Adding Company Location: end -->
<!-- Map Container: start -->
<GmapMap :center="center" :zoom="12" map-type-id="terrain" class="map">
<GmapMarker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
@click="center = m.position"
/>
<DirectionsRenderer
travelMode="DRIVING"
:origin="startLocation"
:destination="endLocation"
:waypoints="waypnt"
:optimizeWaypoints="true"
/>
</GmapMap>
<!-- Map Container: end -->
</div>
<div class="col-md-3">
<!-- Add passenger' Name & Loacation: start -->
<b-form>
<b-form-group
label="passenger's Name"
label-for="passengerName"
class="my-3 text-start"
>
<b-form-input
id="passengerName"
type="text"
placeholder="passenger's name"
value=""
required
></b-form-input>
</b-form-group>
<b-form-group
label="passenger's Location"
label-for="passengerLocation"
class="my-3 text-start"
>
<GmapAutocomplete
id="passengerLocation"
@place_changed="setPlace"
/>
</b-form-group>
<b-button class="btn btn-success w-100" @click="addDestinationPoint">
Get Direction
</b-button>
</b-form>
<!-- Add passengers's Name & Loacation: end -->
</div>
</div>
<div class="row">
<div class="col-md-8">
<!-- data table: start -->
<div class="mt-4">
<h3>Employees table</h3>
<table class="table">
<thead>
<tr>
<th>Employee name</th>
<th>Trip duration</th>
<th>Pickup point order</th>
</tr>
</thead>
<tbody>
<dataTable />
</tbody>
</table>
</div>
<!-- data table: end -->
</div>
</div>
</div>
</template>
<script>
import DirectionsRenderer from "./DirectionsRenderer";
export default {
name: "MapContainer",
data() {
return {
center: { lat: 41.04538761823768, lng: 28.990736439754617 },
currentPlace: null,
originPlace: null,
markers: [],
destinationPlaces: [],
originPlaceLocation: [],
path: [],
passengers: [],
startLocation: null,
endLocation: null,
waypnt: [],
};
},
methods: {
setPlace(place) {
this.currentPlace = place;
},
originPoint(originPoint) {
this.originPlace = originPoint;
},
addDestinationPoint() {
const passengerName = document.getElementById("passengerName").value;
if (this.currentPlace || this.destinationPlaces.length <= 7) {
const marker = {
lat: this.currentPlace.geometry.location.lat(),
lng: this.currentPlace.geometry.location.lng(),
};
const passengerInfo = {
name: passengerName,
pickUpPoint: marker,
};
this.markers.push({ position: marker });
this.path.push({ lat: marker.lat, lng: marker.lng });
this.destinationPlaces.push(this.currentPlace);
this.passengers.push({ passengerInfo });
console.log(this.passengers);
this.center = marker;
this.currentPlace = null;
this.endLocation = marker;
this.waypnt.push({
location: { lat: marker.lat, lng: marker.lng },
stopover: true,
});
} else {
alert("You are allowed to add 8 passenger only!");
}
},
addOriginPoint() {
if (this.originPlace && this.originPlaceLocation.length == 0) {
const originMarker = {
lat: this.originPlace.geometry.location.lat(),
lng: this.originPlace.geometry.location.lng(),
};
this.markers.push({ position: originMarker });
this.path.push({ lat: originMarker.lat, lng: originMarker.lng });
this.originPlaceLocation.push({ position: originMarker });
this.center = originMarker;
this.startLocation = originMarker;
} else {
alert(
"You have alrady added an origin place! if you want to change it please reload the window"
);
}
},
},
components: {
DirectionsRenderer,
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
.map {
width: 100%;
height: 400px;
}
</style>
for more info, look at this:
https://developers.google.com/maps/documentation/javascript/examples/directions-waypoints#maps_directions_waypoints-javascript
Source:stackexchange.com