How to define dynamic variables in JSP loop? - google-maps

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.