set infoTemplate for various graphics in graphics layer in loop

Question

I am successful at getting an info window pop up on the event click of a marker on a map. Now, what I'm having trouble with is passing unique information for each graphic in the loop to the individual info window.

Here's my loop

for(i=0;i<coords.length;i++){
            xcoord=coords[i][1];
            ycoord=coords[i][2];
            type=SimpleMarkerSymbol.STYLE_SQUARE;
            if(coords[i][3]=='stream'){
                var point = new Point(xcoord, ycoord);
            }
            var graphic = new Graphic(point, new SimpleMarkerSymbol(type).setSize(10).setColor(usgscolor));
            //these next four lines are where I'm having confusion
            var infoTemplate = new InfoTemplate();
            infoTemplate.setTitle("title");
            infoTemplate.setContent("content");
            graphic.setInfoTemplate(infoTemplate.setTitle("title"));
            glayer.add(graphic);
        }

Then I add each graphics layer at the end and an event listener for the pop up

map.addLayer(glayer);//add all the individual grahics in the graphics layer to the map          

    glayer.on('click', function(evt) {
        map.infoWindow.setTitle(graphic.getTitle(infoTemplate));
        map.infoWindow.setContent(graphic.getContent(infoTemplate));
        map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
    });

These various topics on the arcgis developer site is what I'm using for reference but I still can't seem to put the pieces together

https://developers.arcgis.com/javascript/jshelp/intro_formatinfowindow.html

https://developers.arcgis.com/javascript/jsapi/graphic-amd.html

https://developers.arcgis.com/javascript/jsapi/infotemplate-amd.html

https://developers.arcgis.com/javascript/jsapi/infowindow-amd.html

Answer 1

I figured it out! I needed to make a new info template and then add that template to the glayer, when I call the event function, I return the info template.

for(i=0;i<coords.length;i++){
            xcoord=coords[i][3];
            ycoord=coords[i][4];
            name=coords[i][1];
            var point = new Point(xcoord, ycoord);
            var template = new InfoTemplate(coords[i][1],coords[i][0]);
            if(coords[i][2]=='stream'){
                type=SimpleMarkerSymbol.STYLE_SQUARE;
            }
            else if(coords[i][2]=='rain'){
                type=SimpleMarkerSymbol.STYLE_DIAMOND;
            }
            else if(coords[i][2]=='well'){
                type=SimpleMarkerSymbol.STYLE_CIRCLE;
            }
            var graphic = new Graphic(point, new SimpleMarkerSymbol(type).setSize(10).setColor(usgscolor));
            glayer.add(graphic.setInfoTemplate(template));
        }

map.addLayer(glayer);//add all the individual grahics in the graphics layer to the map          

    glayer.on('click', function(evt){
        map.infoWindow.setContent(getInfoTemplate());
        map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
    });