Ich habe diesen Teil des Codes geschrieben, um Wegbeschreibungen auf Google Maps anzuzeigen Aber aktuell habe ich nur die Start- und Endpositionen Ich möchte mehr Stopps einlegen und die Route so gut wie möglich gestalten Wie gebe ich mehrere Haltestellen ein? Das habe ich bisher gemacht

<table>
        <tr>
          <th>Start</th>
          <th><GmapAutocomplete @place_changed="setPlace" /></th>
          <th style="width: 50%;"><button class="btn" @click="addMarker(0)">Add</button></th>
        </tr>
        <tr>
          <th>End</th>
          <th><GmapAutocomplete @place_changed="setPlace" /></th>
          <th style="width: 50%;"><button class="btn" @click="addMarker(1)">Add</button></th>
        </tr>
      </table>

Richtungskomponente

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] },
    travelMode: { type: String },
  },
  afterCreate(directionsRenderer) {
    console.log(1)
    let directionsService = new window.google.maps.DirectionsService();
    this.$watch(
      () => [this.origin, this.destination, this.travelMode],
      () => {
        let { origin, destination, travelMode } = this;
        if (!origin || !destination || !travelMode) return;
        directionsService.route(
          {
            origin,
            destination,
            travelMode,
          },
          (response, status) => {
            if (status !== "OK") return;
            // eslint-disable-next-line no-debugger
            //debugger
            directionsRenderer.setDirections(response);
          }
        );
      }
    );
  },
});

<DirectionsRenderer
        travelMode="DRIVING"
        :origin="startLocation"
        :destination="endLocation"
      />

Und meine Funktion

setPlace(place) {
      this.currentPlace = place;
    },
    addMarker(index) {
      const marker = {
        lat: this.currentPlace.geometry.location.lat(),
        lng: this.currentPlace.geometry.location.lng(),
      };
      if (index === 0) this.startLocation = marker;
      if (index === 1) this.endLocation = marker;
      this.center = marker;
      console.log(this.startLocation, this.endLocation)
    },

Bis jetzt geht es mir gut, alles läuft gut, aber ich muss noch mehr Stopps einlegen Wie Sie sehen können, habe ich am Ende nur eine Variable Wie gehe ich vor? Kann ich mich an den aktuellen Code anpassen?