How to remove the error when clicking on the marker?

Question

JavaScript

Help me please. Already quite exhausted. Wasted half a day already.
Clicking on the marker throws an Uncaught TypeError: Cannot read property 'content' of undefined
Here is a live code example https://jsfiddle.net/9c9bovnx/3/

var map = new google.maps.Map(document.getElementById('map'),{
    center: {
        lat: 50.42497789999999,
        lng: 30.459857599999964
    },
    zoom: 10
});

var myBubles = {
    "markers" : [
        {
            "id" : 1,
            "title" : "title",
            "content" : "<div id=\"content\"><div id=\"siteNotice\"></div><h1 id=\"firstHeading\" class=\"firstHeading\">Заголовок</h1><div id=\"bodyContent\"><p><i class=\"fa fa-phone\" aria-hidden=\"true\"></i> Первая строка</p><p><i class=\"fa fa-phone\" aria-hidden=\"true\"></i> Вторая строка</p><p><i class=\"fa fa-phone\" aria-hidden=\"true\"></i> Третья строка</p></div></div>",
            "lat" : 50.42497789999999,
            "lng" : 30.459857599999964,
            "inner_title" : "Заголовок маркера"
        },{
            "id" : 2,
            "title" : "title",
            "content" : "<div id=\"content\"><div id=\"siteNotice\"></div><h1 id=\"firstHeading\" class=\"firstHeading\">Заголовок 2</h1><div id=\"bodyContent\"><p><i class=\"fa fa-phone\" aria-hidden=\"true\"></i> Первая строка 2</p><p><i class=\"fa fa-phone\" aria-hidden=\"true\"></i> Вторая строка 2</p><p><i class=\"fa fa-phone\" aria-hidden=\"true\"></i> Третья строка 2</p></div></div>",
            "lat" : 50.508021165218466,
            "lng" : 30.60405315664059,
            "inner_title" : "Заголовок маркера 2"
        }
    ]
};

console.log(myBubles.markers[0].content);

for(var i = 0; i < myBubles.markers.length; i++){

    var markers = [];

    markers[i] = new google.maps.Marker({
        position: { lat: myBubles.markers[i].lat, lng: myBubles.markers[i].lng },
        map: map,
        title: myBubles.markers[i].inner_title
    });

    markers[i].addListener('click', function() {
        new google.maps.InfoWindow({ content: myBubles.markers[i].content }).open(map, markers[i]);
    });

}

Don't scold me for the quality of the code - I rarely work with JS.

Answer 1

Try like this:

var map = new google.maps.Map(document.getElementById('map'),{
        center: {
            lat: 50.42497789999999,
            lng: 30.459857599999964
        },
        zoom: 10
    });

    var myBubles = {
        "markers" : [
            {
                "id" : 1,
                "title" : "title",
                "content" : "<div id=\"content\"><div id=\"siteNotice\"></div><h1 id=\"firstHeading\" class=\"firstHeading\">Заголовок</h1><div id=\"bodyContent\"><p><i class=\"fa fa-phone\" aria-hidden=\"true\"></i> Первая строка</p><p><i class=\"fa fa-phone\" aria-hidden=\"true\"></i> Вторая строка</p><p><i class=\"fa fa-phone\" aria-hidden=\"true\"></i> Третья строка</p></div></div>",
                "lat" : 50.42497789999999,
                "lng" : 30.459857599999964,
                "inner_title" : "Заголовок маркера"
            },{
                "id" : 2,
                "title" : "title",
                "content" : "<div id=\"content\"><div id=\"siteNotice\"></div><h1 id=\"firstHeading\" class=\"firstHeading\">Заголовок 2</h1><div id=\"bodyContent\"><p><i class=\"fa fa-phone\" aria-hidden=\"true\"></i> Первая строка 2</p><p><i class=\"fa fa-phone\" aria-hidden=\"true\"></i> Вторая строка 2</p><p><i class=\"fa fa-phone\" aria-hidden=\"true\"></i> Третья строка 2</p></div></div>",
                "lat" : 50.508021165218466,
                "lng" : 30.60405315664059,
                "inner_title" : "Заголовок маркера 2"
            }
        ]
    };
    
     myBubles.markers.forEach(function(elem, index){
    		var marker = new google.maps.Marker({
            position: { lat: elem.lat, lng: elem.lng },
            map: map,
            title: elem.inner_title
        });
        marker.addListener('click', function() {
            new google.maps.InfoWindow({ content: elem.content}).open(map, marker);
        });
     });

https://jsfiddle.net/9c9bovnx/5/

Answer 2

Because i at the time the event fired is not at all what it was.
Try something like this:

var marker = markers[i];
markers.addListener('click', function() {
        new google.maps.InfoWindow({ content: marker.content }).open(map, marker);
});