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.