Как создать маркер по клику GoogleMap в Vue?

Question

[geometria]

Почему этот код не добавляет маркер по клику?
в консоли получаю ошибки:

InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number

и

InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama

Подскажите, как исправить этот код:

<template>
<gmap-map
    id="map"
    :center="center"
    :zoom="15"
     @click="addMarker"
  >
    <gmap-marker
      :key="index"
      v-for="(m, index) in markers"
      :position="m.position"
      :clickable="true"
      :draggable="true"
      @click="center=m.position"
    ></gmap-marker>

  </gmap-map>
</template>

<script>
  export default {
    data () {
      return {
        center: {lat: 45.101637, lng: 38.986345},
        markers: [],
        }
  },
mounted() 
{ 
let vm = this
vm.getMarkers(); 
},
methods: {
addMarker(event) {
      this.markers.push(event.latlng);
    },

addMarker(location) {
        var marker = new google.maps.Marker({
          position: location,
          map: map
        });
        markers.push(marker);
      },
}
</script>

Answer 1

[0xD34F]

<gmap-map
  ref="map"
  v-bind="options"
  @click="onMapClick"
>
  <gmap-marker
    v-for="m in markers"
    :key="m.id"
    :position="m.position"
    :clickable="true"
    :draggable="true"
    @click="onMarkerClick"
  />
</gmap-map>

data: () => ({
  options: {
    center: { lat: 45.101637, lng: 38.986345 },
    zoom: 15,
  },
  markers: [],
}),
methods: {
  onMapClick(e) {
    this.markers.push({
      id: 1 + Math.max(0, ...this.markers.map(n => n.id)),
      position: e.latLng,
    });
  },
  onMarkerClick(e) {
    this.$refs.map.panTo(e.latLng);
    // или
    // this.options.center = e.latLng;
  },
},

https://codesandbox.io/s/blissful-fast-pjc7o

Comments

[geometria]

Спасибо большое!