How to define dynamic variables in JSP loop?

Question

I have written the following code to display markers and have respective info windows displaying name of the policestation. The policestation class has name, latitude and longitude.

    <script>
        function initialize()
        {
            var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
            var myCenter = new google.maps.LatLng(28.6523605,77.0910645);
            var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

           var mapProp = {
                center: myCenter,
                zoom: 10,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scaleControl: true
            };


            var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
            var marker = [];
            var info= [];

            <%
            ArrayList<PoliceStation> stationList = new PoliceStation().loadclass();
            for (int i=0 ; i < stationList.size() ; i++) {
            %>

                var pos = new google.maps.LatLng(
                            <%= stationList.get(i).getLatitude()%>,
                            <%= stationList.get(i).getLongitude()%>
                            );

                marker = new google.maps.Marker({
                    position: pos,
                    map: map
                });

                marker.setMap(map);
                var MarkerContent = "<div class=\"marker\">" +
                                    "<h2>"+ "<%=stationList.get(i).getstationName()%>" 
                                    +"</h2>"+ 
                                    "</div>";


                info=new google.maps.InfoWindow();
                info.setOptions({
                content: MarkerContent,
                size: new google.maps.Size(50, 50),
                position: pos
            });

            google.maps.event.addListener(marker, 'click', function () {
                info.setOptions({
                content: MarkerContent
            });
                info.open(map, marker);
            });


        <%
        }
        %>

All the markers are set as expected. However clicking any marker results in opening the infowindow of only the last marker drawn.

I get that this is because all the marker, infoWindow names are redundant and in the end only the last infoWindow gets saved to the last marker.

I have come across solutions that encapsulate the content inside the for loop with

(function() {var marker = ...; google.maps.event.addListener...;})(); 

However, I'm looking for a solution to dynamically distinctly define each variable name. like for example append the value of a counter incremented at each iteration to each marker and info variable. Kindly do not provide JSTP solution. looking for a specific JSP solution

Answer 1

Surprisingly it was really easy... JSP is basically used to print HTML dynamically. so, instead of using marker variable as

var marker = new google.maps.Marker({
                    position: pos,
                    map: map
                });

use -

var <%out.print("marker"+i);%> = new google.maps.Marker({
                    position: pos,
                    map: map
                });

It is to be noted that-

var <%out.print("marker["+i+"]");%> = new google.maps.Marker({
                    position: pos,
                    map: map
                });

did not work for me.

The correct code above creates new variables with values marker1, marker2... etc

also the content update function inside the event listener-

info.setOptions({
            content: MarkerContent
        });

is not required.