examples/polyline-editing.html

<head>
  <meta charset="utf-8" />
</head>
<body>
  <div id="root">
    <label>
      Start at:
      <gmap-autocomplete @place_changed="updateCenter($event)" />
    </label>

    <gmap-map :center="center" :zoom="12" style="width: 100%; height: 500px" ref="map">
      <gmap-polyline v-if="path.length > 0" :path="path" :editable="true" @path_changed="updateEdited($event)"
          @rightclick="handleClickForDelete"
          ref="polyline">
      </gmap-polyline>
    </gmap-map>

    <div>
      <textarea :value="polylineGeojson" style="width: 100%; height: 200px"
        @input="readGeojson">
      </textarea>
      <div v-if="errorMessage">{{errorMessage}}</div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
  <script src="vue-google-maps.js"></script>

  <script>
    Vue.use(VueGoogleMaps, {
      load: {
        key: 'AIzaSyDf43lPdwlF98RCBsJOFNKOkoEjkwxb5Sc',
        libraries: 'places',
      },
    });

    function closeLoop (path) {
      return path.concat(path.slice(0, 1))
    }

    document.addEventListener('DOMContentLoaded', function() {
      window.XXX = new Vue({
        el: '#root',
        data: {
          center: {lat: 1.38, lng: 103.8},
          edited: null,
          path: [
            {lat: 1.33, lng: 103.75},
            {lat: 1.43, lng: 103.85},
          ],
          mvcPath: null,
          errorMessage: null,
          polylineGeojson: '',
        },
        watch: {
          polylinePath: _.throttle(function (path) {
            if (path) {
              this.path = path
              this.polylineGeojson = JSON.stringify({
                type: 'Polyline',
                coordinates: this.path.map(({lat, lng}) => [lng, lat])
              }, null, 2)
            }
          }, 1000)
        },
        computed: {
          polylinePath: function () {
            if (!this.mvcPath) return null

            let path = [];
            for (let j=0; j<this.mvcPath.getLength(); j++) {
              let point = this.mvcPath.getAt(j);
              path.push({lat: point.lat(), lng: point.lng()});
            }
            return path
          },
        },
        methods: {
          updateCenter: function (place) {
            this.center = {
              lat: place.geometry.location.lat(),
              lng: place.geometry.location.lng(),
            }
          },
          updateEdited: function (mvcPath) {
            this.mvcPath = mvcPath
          },
          handleClickForDelete($event) {
            if ($event.vertex) {
              this.$refs.polyline.$polylineObject.getPaths()
                .getAt($event.path)
                .removeAt($event.vertex)
            }
          },
          readGeojson: function ($event) {
            try {
              this.polylineGeojson = $event.target.value

              var v = JSON.parse($event.target.value);

              this.path = v.coordinates
                .map(([lng, lat]) => ({lat, lng}))

              this.errorMessage = null
            } catch (err) {
              this.errorMessage = err.message
            }
          }
        }
      });
    });
  </script>

</body>