How to pass a variable from PlayFramework 1.2.4 to Javascript

StackOverflow https://stackoverflow.com/questions/21500232

  •  05-10-2022
  •  | 
  •  

Pergunta

I've found this nice tutorial on GMAP V3 working with json http://www.svennerberg.com/2012/03/adding-multiple-markers-to-google-maps-from-json/ the javascript is fine and it's working for me.

Now, I want to have the JSON from the controller of Play ;

Here is the controller : 

public static void handleSubmit2(Bill bill)
    {

Gson gson; 


        Location l = new Location((long) 1,"u222","fes","morococ","37.401220","-12.125604","8 25 98");
        Location l2 = new Location((long) 1,"u222","fes","morococ","34.401220","-122.125604","8 25 98");
        Location l3 = new Location((long) 1,"u222","fes","morococ","40.401220","-50.125604","8 25 98");

        List<Location> locs = new ArrayList<Location>();;
        locs.add(l);
        locs.add(l2);
        locs.add(l3);

        List<JsonValid> jsons = new ArrayList<JsonValid>();
        JsonValid jsonV = new JsonValid();

        for(int i = 0 ; i<locs.size();i++)
        {
            jsonV.title = locs.get(i).city;
            jsonV.lat = locs.get(i).latitude;
            jsonV.lng = locs.get(i).longitude;

            jsons.add(i, jsonV);

        }

        gson = new Gson();
        String jlocations = gson.toJson(jsons);

        //The format is valid when I see the output
        System.out.println("json = " + jlocations);

        render("@handleSubmit2",jlocations);
    }

Here is the view handleSubmit2.html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=KEY&sensor=true">
    </script>
    <script type="text/javascript">
    (function() {

        window.onload = function() {

            // Creating a new map
            var map = new google.maps.Map(document.getElementById("map"), {
              center: new google.maps.LatLng(57.9, 14.6),
              zoom: 6,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            });


            // Creating the JSON data
            var json = ${jlocations};

            // Creating a global infoWindow object that will be reused by all markers
            var infoWindow = new google.maps.InfoWindow();

            // Looping through the JSON data
            for (var i = 0, length = json.length; i < length; i++) {
                var data = json[i],
                    latLng = new google.maps.LatLng(parseFloat(data.lat), parseFloat(data.lng));

                // Creating a marker and putting it on the map
                var marker = new google.maps.Marker({
                    position: latLng,
                    map: map,
                    title: data.title
                });

                // Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data)
                (function(marker, data) {

                    // Attaching a click event to the current marker
                    google.maps.event.addListener(marker, "click", function(e) {
                        infoWindow.setContent(data.description);
                        infoWindow.open(map, marker);
                    });


                })(marker, data);

            }

        }

    })();
    </script>


  </head>
  <body>
  <h1>Map for bill</h1>
    <div id="map" style="width:800px; height:500px"></div>

  </body>
</html>

What shoud I put in my javascript so that it could get the JSON ?

Any suggestions, any links that could help please.

P.S : I'm so terrible at Javascript and a beginner with Play so please be tolerant.

Best regards and Thank you for helping me.

Foi útil?

Solução

So resuming:

1) in order to pass the parameter to the view: call renderArgs.put("jlocations", jlocations) before the render()

2) in order to render the json quotes correctly: in the view code you need to assign var json = ${jlocations.raw()}

as a tip: use the browser's console

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top