Uncaught TypeError: Cannot read property '0' of undefined

Question

やりたいことは googlemapApi でマーカーにマウスホバーする時に吹き出しを出すことです。
マーカーを配置しイベントを起こす事自体はできたのですが、下記のエラーが出てきてしまいます。

Uncaught TypeError: Cannot read property '0' of undefined

コードは下記の通りです。

export default {
    data() {
        return {
            map: null,
            markerDatas: [],
            markers: [],
            infoWindows: [],
            markerLatLng: null,
        }
    },
    mounted (){
        this.setMap();
    },
    methods: {
        fetchDatas: async function (){
            //初期データ取得する。
            await axios.get(
                '/map/api/points/'
            ).then(
                response => (this.markerDatas = response.data)
            ).catch(function (error) {
                alert("データの取得に失敗しました。")
            })
        },
        setMap: async function () {
            await this.fetchDatas()
            let timer = setInterval(() => {
                if(window.google){
                    clearInterval(timer);
                    //マップを描画する。
                    this.map = new window.google.maps.Map(document.getElementById("map"), {
                        center: {lat: this.markerDatas[0]["lat"], lng: this.markerDatas[0]["lng"]},
                        zoom: 15
                    });
                    for (let i = 0; i < this.markerDatas.length; i++) {
                        // マーカーを描画する。
                        this.markers[i] = new window.google.maps.Marker({
                            position: {lat: this.markerDatas[i]["lat"], lng: this.markerDatas[i]["lng"]},
                            map:this.map,
                        })
                        // マーカーの情報を設定する。
                        this.infoWindows[i] = new window.google.maps.InfoWindow({
                            content: '<div class="balloon">' + this.markerDatas[i]['title'] + '</div>'
                        });
                        // マーカーのイベントを設定する。
                        this.markers[i].addListener('mouseover', function() {
                            alert(i) //ホバー時該当する番号が表示される
                            alert(this.infoWindows) //undifined
                            alert(this.markers) //undifiend
                            this.infoWindows[i].open(this.map, this.markers[i]);
                        });
                    }
                }
            },500)
        }
    }
}

問題の箇所は、下記の部分で infoWindows と markers が　undefined となってしまうところです。
どのようにしたら undefined を解消できますでしょうか。
ご教授頂けたら幸いです。よろしくお願いします。

alert(i) //ホバー時該当する番号が表示される
alert(this.infoWindows) //undifined
alert(this.markers) //undifiend

Answer 1

// this.markers[i].addListener('mouseover', function() {
//                                           ↓
   this.markers[i].addListener('mouseover', () => {

Comments

[sususu]

たびたびありがとうございます！
無事動くようになりました！