Issue
I'm trying to draw multiple polygons using a JSON Array. Here's my current code.
<script type="text/javascript">
var map;
var drawingManager;
var elements;
//Overlays
var polygons = [];
var polylines = [];
//JSON String turned into array
var newPolygons = '<%=request.getAttribute("polygons")%>';
var editedPolygons = JSON.parse(newPolygons);
function initialize() {
//Map
var mapProp = {
center: new google.maps.LatLng(14.5667, 120.9927),
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
//Drawing Manager
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.POLYGON,
google.maps.drawing.OverlayType.POLYLINE
]
}
});
drawingManager.setMap(map);
//Triggers
google.maps.event.addDomListener(drawingManager, 'polygoncomplete', function (polygon) {
drawingManager.setDrawingMode(null);
var polypath = polygon.getPath().getArray();
polygons.push(polypath);
});
//Create the Polygons
var bermudaTriangle = new google.maps.Polygon({
paths: editedPolygons,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35
});
}
//Sends to Servlet
function sendElements() {
var elementsJSON = JSON.stringify(polygons);
window.location.assign("LoadNextPage?polygons=" + elementsJSON);
}
</script>
I send the elementsJSON to another page by using a servlet, I edit it, then I send it back to the main page through another servlet and turn it back into an array using JSON.parse. But the main page doesn't show the polygons no matter what I do. How do I do it?
Here is an example of what the newPolygons JSON String looks like:
[[{"H":14.56754606924714,"L":120.99225461483002},{"H":14.567213783453319,"L":120.9916752576828},{"H":14.566736121747363,"L":120.99207758903503}],[{"H":14.566383066777853,"L":120.99221169948578},{"H":14.566325954891425,"L":120.99138557910919},{"H":14.565635419093956,"L":120.9915840625763}]]
But I still use JSON.parse on that.
Here is the code I use for the servlet that leads to the second page:
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String elementsJSON = (String) request.getParameter("polygons");
request.setAttribute("polygons", elementsJSON);
ServletContext context = getServletContext();
RequestDispatcher dispatch = context.getRequestDispatcher("/second-pageAgain.jsp");
dispatch.forward(request, response);
}
Here is the code for the second page
<script>
var elementsJSON = '<%=request.getAttribute("polygons")%>';
var elements;
function init(){
document.getElementById('savedata').value = elementsJSON;
}
function saveChanges(){
elements = document.getElementById('savedata').value;
alert(elements);
window.location.assign("LoadMaps?polygons=" + elements);
}
</script>
And here is the code for the servlet I use to go back to the main page with the edited coordinates.
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String elements = (String) request.getParameter("polygons");
System.out.println(elements);
request.setAttribute("polygons", elements);
ServletContext context = getServletContext();
RequestDispatcher dispatch = context.getRequestDispatcher("/maps2Again.jsp");
dispatch.forward(request, response);
}
I'm trying to draw the polygons, that I edited in the second page, on the map but I can't seem to make it appear.
Solution
This works for me:
for (var i = 0; i < editedPolygons.length; i++) {
var poly = new google.maps.Polygon({
path: editedPolygons[i],
map: map
});
}
Note: I changed your JSON from "H" to "lat", "L" to "lng" to make it google.maps.LatLngLiteral objects so it would be portable across API releases.
code snippet:
var geocoder;
var map;
var editedPolygons = [
[{
"lat": 14.56754606924714,
"lng": 120.99225461483002
}, {
"lat": 14.567213783453319,
"lng": 120.9916752576828
}, {
"lat": 14.566736121747363,
"lng": 120.99207758903503
}],
[{
"lat": 14.566383066777853,
"lng": 120.99221169948578
}, {
"lat": 14.566325954891425,
"lng": 120.99138557910919
}, {
"lat": 14.565635419093956,
"lng": 120.9915840625763
}]
];
var map;
var drawingManager;
var elements;
//Overlays
var polygons = [];
var polylines = [];
//JSON String turned into array
// var newPolygons = '<%=request.getAttribute("polygons")%>';
// var editedPolygons = JSON.parse(newPolygons);
function initialize() {
//Map
var mapProp = {
center: new google.maps.LatLng(14.5667, 120.9927),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
for (var i = 0; i < editedPolygons.length; i++) {
var poly = new google.maps.Polygon({
path: editedPolygons[i],
map: map
});
}
//Drawing Manager
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.POLYGON,
google.maps.drawing.OverlayType.POLYLINE
]
}
});
drawingManager.setMap(map);
//Triggers
google.maps.event.addDomListener(drawingManager, 'polygoncomplete', function(polygon) {
drawingManager.setDrawingMode(null);
var polypath = polygon.getPath().getArray();
polygons.push(polypath);
});
//Create the Polygons
var bermudaTriangle = new google.maps.Polygon({
paths: editedPolygons,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35
});
}
//Sends to Servlet
function sendElements() {
var elementsJSON = JSON.stringify(polygons);
window.location.assign("LoadNextPage?polygons=" + elementsJSON);
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#googleMap {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="googleMap"></div>
Answered By - geocodezip
Answer Checked By - Cary Denson (JavaFixing Admin)