how to pass array of markers from servlet to javascript

Question

I want pass array of markes to javascript on jsp page to show them on google map. In servlet I load array of markers from database, but I don't know how to pass them to javascript. Thi is my servlet

protected void doGet(HttpServletRequest request, HttpServletResponse response) `throws ServletException, IOException {
    // TODO Auto-generated method stub`
    PlaceDao placeDao = new PlaceDao();
    ArrayList<Place> pList = new ArrayList<Place>();
    try {
        pList = placeDao.readData();
    } catch (SQLException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
    Marker marker = new Marker();
    ArrayList<Marker> mList = new ArrayList<Marker>();
    for (int i = 0; i < pList.size(); ++i)
    {
        marker.setLatitude(pList.get(i).getLatitude());
        marker.setLongitude(pList.get(i).getLongitude());
        mList.add(marker);
    }
    request.setAttribute("marker", mList);

    request.getRequestDispatcher("pages/location.jsp").forward(request, response);
}`

and my jsp page

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>


<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<script src="http://maps.googleapis.com/maps/api/js">

</script>

<script>
    var myCenter = new google.maps.LatLng(51.508742, -0.120850);

    function initialize() {
        var mapProp = {
            center : myCenter,
            zoom : 5,
            mapTypeId : google.maps.MapTypeId.ROADMAP
        };

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

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

        marker.setMap(map);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
    <div id="googleMap" style="width: 500px; height: 380px;"></div>
</body>
</html>

So instead of var myCenter = new google.maps.LatLng(51.508742, -0.120850); I want pass my array. I think that could be done with JSON but I don't sure and don't know how. Thanks for any help!

score 0 · Answer 1 · edited May 23 '17 at 12:31

Few things to nottice:

You cannot read the Java List in javascript.
You must return the result in some way to be able to access in the javascript (client) side.

How to get the list in the client side?

You can choose one of this 2 options:

Use an Ajax call (for example):

$.get( "urlToMethod", { 
        "someVariable": someValue 
    }).done(function( data ) {
        // in data you have the list of markers
    }).error(function (data) {
        // in data you have exception or the error
    });

Java mapping:

@RequestMapping(value = "urlToMethod")
public String[] getMarkers (
        HttpServletRequest httpRequest,
        HttpServletResponse httpResponse,
        @RequestParam(value = "someVariable") String someVariable) {

    // get the markers and return a String[] or JSONArray!!!
}

Put the list into an JSP fied and read it in the script:

Java side (create a HelperClass if necessary)

model.addAttribute("markers", markersList);

Javascript

markers = $("#markers").val();

JSP

<form:hidden path="markers" id="markers" />

How to read the Java `List` in javascript:

Also here you can use any of this options:

You cannot read a List in javascript, but you can read a String or String[] (don't use double or float for the GPS lat/long due loosing of precision).
Create a JSONArray of the markers like in this answer:

NOTE: I assume you have JQuery in your project, also be careful because in Ajax solutions Spring is used, check here if you don't have it in your project.

how to pass array of markers from servlet to javascript

1 Answers1

How to get the list in the client side?

How to read the Java List in javascript:

How to read the Java `List` in javascript: