fawmi / vue-google-maps

Reactive Vue 3 components for Google maps
https://vue-map.netlify.app
MIT License
197 stars 103 forks source link

Issue with Polyline documentation #197

Open losimen opened 1 year ago

losimen commented 1 year ago

In the official documentation of poly line author described following code as a template to use polylines:

<template>
  <GMapPolyline 
      :path="path"
      :editable="true"
      ref="polyline" />
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      center: {lat: 1.38, lng: 103.8},
      path: [
        {lat: 1.33, lng: 103.75},
        {lat: 1.43, lng: 103.85},
      ],
    }
  },
}
</script>

This code throws following error, so it doesn't wodk:

uncaught typeerror: this.$mappromise.then is not a function polyline

Reading documentation further, I decided that I should wrap GMapPolyLine inside GMapMap, so the correct code should look like this:

<template>
  <GMapMap
    :center="center"
    :zoom="4"
    style="width: 100vw; height: 100vh"
  >
    <GMapPolyline
      :path="path"
      :editable="true"
      ref="polyline" />
  </GMapMap>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      center: {lat: 1.38, lng: 103.8},
      path: [
        {lat: 1.33, lng: 103.75},
        {lat: 1.43, lng: 103.85},
      ],
    }
  },
}
</script>