info windows for each marker google maps

Question

I'm having some trouble with implementing some data in the infowindow for dynamic markers that i make with some geopoints from parse.

 function initMap(arlat, arlon, arname, artel, ardesc, aradd, arithmisi) {

    var map = new google.maps.Map(document.getElementById('map'), {
                            zoom: 6,
                            center: {
                                lat: 37.58,
                                lng: 23.43
                            }
                        });
                        var iconBase = 'http://sourtouki.gr/';

                        for (j = 0; j < arithmisi; j++) {
                            var contentString = '<div id="content">' +
                                '<div id="siteNotice">' +
                                '</div>' +
                                arname[j] +
                                '<div id="bodyContent">' +
                                ardesc[j] + "<br>" + aradd[j] + "<br>" + artel[j] + "<br>" +
                                '</div>' +
                                '</div>';


                            var marker = new google.maps.Marker({
                                position: {
                                    lat: arlat[j],
                                    lng: arlon[j]
                                },
                                map: map,
                                icon: iconBase + 'sourtoukilogo.png',        
                                title: arname[j]
                            });        
                        }
                        var infowindow = new google.maps.InfoWindow({
                            content: contentString
                        });

                        marker.addListener('click', function() {
                            infowindow.open(map, marker);
                        });
                    }

So with the code above i push some data that i have from some tables into the map. The markers are created in the locations as they have to be, but whenever i click on a marker it opens only one. It loads 17 markers but the only infowindow that opens is the first entry, whatever marker i push. Also the title of each marker is the correct one.

UPDATE I have 17 entries on this map, 17 geopoints (lat, lng), 17 names, 17description etc. So with the code above i get all the geoipoints and i put the markers on the correct positions into the map. And i want when i click on a marker to take the name and address and appear it in the infowindow. But i guess i'm somewhere wrong in the for loop. Although i take all the data as they have to be, each geopoint has the correct name etc, but whenever i click a marker, only the 1st entry opens the infowindow, lets say that i click the 3rd marker in the map the 1st infowindow will open, also happens if i push the 12th marker. Any idea why this happens??

UPDATE 2

function initMap(arlat, arlon, arname, artel, ardesc, aradd, arithmisi) {



                    // console.log(arlat.length + arlon.lenght);

                    var map = new google.maps.Map(document.getElementById('map'), {
                        zoom: 6,
                        center: {
                            lat: 37.58,
                            lng: 23.43
                        }
                    });
                    var iconBase = 'http://sourtouki.gr/';

                    infowindow = new google.maps.InfoWindow();
                    for (j = 0; j < arithmisi; j++) {

                        var marker = new google.maps.Marker({
                            position: {
                                lat: arlat[j],
                                lng: arlon[j]
                            },
                            map: map,
                            icon: iconBase + 'sourtoukilogo.png',

                            title: arname[j]
                        });
                    var contentString = '<div id="content">' +
                            '<div id="siteNotice">' +
                            '</div>' +
                            arname[j] +
                            '<div id="bodyContent">' +
                            ardesc[j] + "<br>" + aradd[j] + "<br>" + artel[j] + "<br>" +
                            '</div>' +
                            '</div>';

                             google.maps.event.addListener(marker, 'click', function() {
                                    infowindow.setContent(contentString);
                                    infowindow.open(map,this);

                                 });


                    }


                }

On the 2nd update i make an empty infowindow outside the for loop and after i call the content inside and now it opens all the infowindows but it has the same content inside.

Generaly i've tried a lot of answers in other questions here in stackoverflow and none fix worked for my case, if someone could help i would be grateful!

Answer 1

Your for loop is only and not for marker and for infowindow and listener because these are off the loop try this way .. but most important you need an array of markers instead a single marker this way

var markers = [];

for (j = 0; j < arithmisi; j++) {
    var contentString = '<div id="content">' +
        '<div id="siteNotice">' +
        '</div>' +
        arname[j] +
        '<div id="bodyContent">' +
        ardesc[j] + "<br>" + aradd[j] + "<br>" + artel[j] + "<br>" +
        '</div>' +
        '</div>';


    var marker = new google.maps.Marker({
        position: {
            lat: arlat[j],
            lng: arlon[j]
        },
        map: map,
        icon: iconBase + 'sourtoukilogo.png',        
        title: arname[j]
    });        

    k = markers.push(marker);

    var infowindow = new google.maps.InfoWindow({
      content: contentString
    });

    markers[k-1].addListener('click', function() {
      infowindow.open(map, marker);
    });
}

Answer 2

The content of your infowindow is being set outside of the for loop. So it's always going to be set to the last value of contentString.