(Vue.js)googleMapのピンのマッピングが上手く行かない

Question

◼️やりたいこと
現在、vue.jsとcordovaでgooglemapの読込、表示と
複数ピンのマッピングを行うコードを実装しております。
現在位置を取得し、当該地点に標準を合わせた上で、配列に入れている
位置情報データをマッピングしたい

◼️事象
「InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama」
とコンソールエラーが出てしまいマッピングができない状況でございます。
もしかすると、locationsの定義の仕方が間違っているかもしれませんが、
原因を明確にわかり兼ねております為、お力添えを頂けますと幸いです。
宜しくお願い致します。

<script>
export default {
  data: function () {
    return {
      map: {},
      position: {},
      markers: [],
      // ロケーション（緯度・軽度）と、id、タイトルです。
      locations: [
        {
          location:{lat: 35.681, lng: 139.761},
          id:1,
          title:"ラーメン屋1"
        },
        {
          location:{lat: 35.682, lng: 139.762},
          id:2,
          title:"ラーメン屋2"
        },
        {
          location:{lat: 35.683, lng: 139.763},
          id:3,
          title:"ラーメン屋3"
        },
        {
          location:{lat: 35.684, lng: 139.764},
          id:4,
          title:"ラーメン屋4"
        },
        {
          location:{lat: 35.685, lng: 139.765},
          id:5,
          title:"ラーメン屋5"
        }
      ]
    }
  },
  watch: {
    position: function () {
      const map = this.$data.map
      const position = new google.maps.LatLng(this.$data.position.latitude, this.$data.position.longitude)
      const marker = new google.maps.Marker({
        position,
        map
      })

      map.panTo(position)
    }
  },
  mounted () {
    const element = document.getElementById('map')
    const options = {
      zoom: 14,
      center: new google.maps.LatLng(32.750443,129.877561)
    }
    this.$data.map = new google.maps.Map(element, options);
    this.getCurrentPosition()

      //this.locations をループしてマーカー群を作成
      this.markers = this.locations.map( function(data, i) {
        var marker = new google.maps.Marker({
          position: data.location,
          map: map
        });
      });

  },
  methods: {
    getCurrentPosition () {
      navigator.geolocation.getCurrentPosition(onSuccess, onError)

      const self = this
      function onSuccess(position) {
        self.$data.position = position.coords
      }

      function onError(error) {
        alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n')
      }
    }
  }
}
</script>

Answer 1

cordovaはまったく知りません　＆　vue.jsもさほど詳しくありませんが・・

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

これは、GoogleMapのエラーですよね。「地図のインスタンスじゃない」って怒られてます。

エラー文の通り、「地図じゃない」のが原因だと思うので、
マーカーを設置する際に渡している地図インスタンスのつもりのmapが、間違っているのでは。。？

      //this.locations をループしてマーカー群を作成
      this.markers = this.locations.map( function(data, i) {
        var marker = new google.maps.Marker({
          position: data.location,
          map: map // ←これ★
        });
      });