Within my cluster Table, there is a column called description which stores cluster coordinates in JSON format. I want to draw multiple cluster polygons on Google Maps using these coordinates.
id | description
----+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1 | {"points":[{"lat":14.232437996569354,"lng":76.409912109375},{"lat":13.336175186494927,"lng":77.1185302734375},{"lat":12.961735843534294,"lng":77.596435546875},{"lat":12.511665400971031,"lng":76.904296875}]}
2 | {"points":[{"lat":14.232437996569354,"lng":76.409912109375}, {"lat":13.336175186494927,"lng":77.1185302734375},{"lat":12.961735843534294,"lng":77.596435546875},{"lat":12.511665400971031,"lng":76.904296875}]}
I need to draw multiple polygons but I am having trouble getting the JSON data into my Rails controller.
Controller Code:
query="select id,description from clusters";
@result=ActiveRecord::Base.connection.execute(query);
The issue is how to pass this @result to JavaScript in order to draw multiple polygons on Google Maps. If I copy the JSON data into a variable in JS, I can draw the clusters, but I'm struggling with passing this JSON data from the database in the controller to JavaScript in Rails.
My Google Maps JavaScript code works if I hard code the JSON into a variable, but I need to retrieve this JSON data from the database. How can I pass the JSON with ID from the controller to JavaScript?
var obj=i need json to store here //this how to fetch json from controller to js
polygons = [];
for(var i = 0; i < obj.length; ++i){
//do something with obj[i]
for(var ind in obj[i]) {
console.log(ind);
var arr = new google.maps.MVCArray();
for(var vals in obj[i][ind]){
console.log(vals, obj[i][ind][vals].lat );
arr.push( new google.maps.LatLng( obj[i][ind][vals].lat, obj[i][ind][vals].lng ) );
}
}
polygons.push(arr);
}
polygons.forEach( function(polyPath) {
var polygon = new google.maps.Polygon({
paths: polyPath,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);