title: How To Draw Multiple Polygons based on a JSON Array
body: <p>I'm trying to draw multiple polygons using a JSON Array. Here's my current code.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          var map;
          var drawingManager;
          var elements;
  
          //Overlays
          var polygons = [];
          var polylines = [];
          //JSON String turned into array
          var newPolygons = '&lt;%=request.getAttribute("polygons")%&gt;';
          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);
          }
      &lt;/script&gt;
  </code></pre>
  
  <p>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?</p>
  
  <p>Here is an example of what the newPolygons JSON String looks like:</p>
  
  <pre><code>[[{"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}]]
  </code></pre>
  
  <p>But I still use JSON.parse on that.</p>
  
  <p>Here is the code I use for the servlet that leads to the second page:</p>
  
  <pre><code>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);
  
  }
  </code></pre>
  
  <p>Here is the code for the second page</p>
  
  <pre><code>&lt;script&gt;
          var elementsJSON = '&lt;%=request.getAttribute("polygons")%&gt;';
          var elements;
          function init(){ 
            document.getElementById('savedata').value = elementsJSON;
          }
          function saveChanges(){
              elements = document.getElementById('savedata').value;
              alert(elements);
              window.location.assign("LoadMaps?polygons=" + elements);
          }
      &lt;/script&gt;
  </code></pre>
  
  <p>And here is the code for the servlet I use to go back to the main page with the edited coordinates.</p>
  
  <pre><code> 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);
  }
  </code></pre>
  
  <p>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.</p>