title: why JSON.stringify() and JSON.parse does not work?
body: <p>I have this javascript result:</p>
  <pre><code>var layer = '{&quot;type&quot;:&quot;polygon&quot;, &quot;coordinates&quot;: &quot;-34.32982832836202 149.88922119140625, -34.80027235055681 149.80682373046875, -34.74161249883173 150.30120849609375, -33.99802726234876 150.77362060546875, -33.97980872872456 150.27923583984375&quot;}';
  </code></pre>
  <p>I checked it against JSONlint.com and was told it is a valid JSON string.</p>
  <p>why can't <code>JSON.parse()</code> and <code>JSON.stringify()</code> not work.</p>
  <p>I'm being told by the console that <code>JSON.parse()</code> and <code>JSON.stringify</code> are not recognized functions.</p>
  <p>Thanks.</p>
  <h1>UPDATE 1</h1>
  <p>ok.  let me try this again.  Sorry, was given bad info.</p>
  <pre><code>var polygon = new Array();
  polygon.push('{&quot;type&quot;:&quot;polygon&quot;, &quot;coordinates&quot;: &quot;-34.32982832836202 149.88922119140625, -34.80027235055681 149.80682373046875, -34.74161249883173 150.30120849609375, -33.99802726234876 150.77362060546875, -33.97980872872456 150.27923583984375&quot;}');
  
  var layer = polygon[0]  //should be of value of string just stored
  console.log(layer);  //correctly displays JSON string
  console.log(JSON.parse(layer));  //line that errors.
  </code></pre>
  <p>this is a portion of the full code below:</p>
  <pre><code>// This example requires the Drawing library. Include the libraries=drawing
  // parameter when you first load the API. For example:
  // &lt;script src=&quot;https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&amp;libraries=drawing&quot;&gt;
  var selectedShape;
  var drawingManager;
  var names = [];
  var polygons = new Array();
  
  
  function initMap() {
  
  
      var map = new google.maps.Map(document.getElementById('map'), {
          center: {
              lat: -34.397,
              lng: 150.644
          },
          zoom: 8
      });
  
      drawingManager = new google.maps.drawing.DrawingManager({
          drawingMode: google.maps.drawing.OverlayType.POLYGON,
          drawingControl: true,
          drawingControlOptions: {
              position: google.maps.ControlPosition.TOP_CENTER,
              drawingModes: ['circle', 'polygon', 'rectangle']
          },
          polygonOptions: {
              editable: true,
              draggable: true
          },
          circleOptions: {
              editable: true,
              draggable: true
          },
          rectangleOptions: {
              editable: true,
              draggable: true
          }
  
  
      });
      drawingManager.setMap(map);
  
      //load preset data
  
  
      function setJSON(Shape) {
          console.log(Shape.type);
          if (Shape.type === &quot;circle&quot;) {
              return '{&quot;type&quot;:&quot;'+Shape.type +'&quot;, &quot;lat&quot;:&quot;'+Shape.getCenter().lat()+'&quot;, &quot;lng&quot;:&quot;'+Shape.getCenter().lng()+'&quot;, &quot;radius&quot;:&quot;'+Shape.getRadius()+'&quot;  }';
          }
          if (Shape.type === &quot;rectangle&quot;){
              return '{&quot;type&quot;:&quot;' + Shape.type + ', &quot;start&quot;:&quot;'+ Shape.getBounds().getNorthEast() +'&quot;, &quot;end&quot;:&quot;'+ Shape.getBounds().getSouthWest() +'&quot;}';
          }
          if (Shape.type === &quot;polygon&quot;){
              //eturn '{&quot;type&quot;:&quot;'+ Shape.type +'&quot;}' + Shape.getPaths();
              vertice = Shape.getPath();
              console.log(&quot;vertice count:  &quot; +  vertice.getLength());
              JSON = '{&quot;type&quot;:&quot;'+ Shape.type +'&quot;, &quot;coordinates&quot;: &quot;';
              vertice.forEach(function(xy, i) {
                  JSON = JSON + xy.lat() + ' ' + xy.lng() + ', ';
              });
  
              JSON = JSON.slice(0,-2) + '&quot;}';
              return JSON;
          }
  
          return 0
      }
  
      google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
  
          drawingManager.setMap(null);
  
          var newShape = event.overlay;
          newShape.type = event.type;
          selectedShape = newShape;
          console.log(setJSON(selectedShape));
  
          if (newShape.type === &quot;circle&quot; || newShape.type === &quot;rectangle&quot;) {
  
              google.maps.event.addListener(selectedShape, 'bounds_changed', function(event){
                  console.log(setJSON(selectedShape));
              });
  
          }
  
          if (newShape.type === &quot;polygon&quot;) {
  
              google.maps.event.addListener(selectedShape.getPath(), 'set_at', function(event) {
                  // complete functions
                  console.log(setJSON(selectedShape));
              });
  
              google.maps.event.addListener(selectedShape.getPath(), 'insert_at', function(event) {
                  // complete functions
                  console.log(setJSON(selectedShape));
              });
  
              google.maps.event.addListener(selectedShape, 'rightclick', function(event) {
                  // Check if click was on a vertex control point
                  if (event.vertex === undefined) {
                      return;
                  }
                  deleteMenu.open(map, selectedShape.getPath(), event.vertex);
                  console.log('right-click');
              })
  
          }
  
          function DeleteMenu() {
              this.div_ = document.createElement('div');
              this.div_.className = 'delete-menu';
              this.div_.innerHTML = 'Delete';
  
              var menu = this;
              google.maps.event.addDomListener(this.div_, 'click', function() {
                  menu.removeVertex();
              });
          }
          DeleteMenu.prototype = new google.maps.OverlayView();
  
          DeleteMenu.prototype.onAdd = function() {
              var deleteMenu = this;
              var map = this.getMap();
              this.getPanes().floatPane.appendChild(this.div_);
  
              // mousedown anywhere on the map except on the menu div will close the
              // menu.
              this.divListener_ = google.maps.event.addDomListener(map.getDiv(), 'mousedown', function(e) {
                  if (e.target != deleteMenu.div_) {
                      deleteMenu.close();
                  }
              }, true);
          };
  
          DeleteMenu.prototype.onRemove = function() {
              google.maps.event.removeListener(this.divListener_);
              this.div_.parentNode.removeChild(this.div_);
  
              // clean up
              this.set('position');
              this.set('path');
              this.set('vertex');
          };
  
          DeleteMenu.prototype.close = function() {
              this.setMap(null);
          };
  
          DeleteMenu.prototype.draw = function() {
              var position = this.get('position');
              var projection = this.getProjection();
  
              if (!position || !projection) {
                  return;
              }
  
              var point = projection.fromLatLngToDivPixel(position);
              this.div_.style.top = point.y + 'px';
              this.div_.style.left = point.x + 'px';
          };
  
          DeleteMenu.prototype.open = function(map, path, vertex) {
              this.set('position', path.getAt(vertex));
              this.set('path', path);
              this.set('vertex', vertex);
              this.setMap(map);
              this.draw();
          };
  
          DeleteMenu.prototype.removeVertex = function() {
              var path = this.get('path');
              var vertex = this.get('vertex');
  
              if (!path || vertex == undefined) {
                  this.close();
                  return;
              }
  
              path.removeAt(vertex);
              this.close();
          };
  
          var deleteMenu = new DeleteMenu();
  
      });
  
      google.maps.event.addDomListener(document.getElementById('btnClear'), 'click', function(event) {
          selectedShape.setMap(null);
          drawingManager.setMap(map);
      });
  
      google.maps.event.addDomListener(document.getElementById('save'), 'click', function(event) {
          names.push($('#polyname').val());
          polygons.push(setJSON(selectedShape));
          length = names.length;
          console.log(length);
          console.log(&quot;name:  &quot; + names[length-1] + &quot;; polygon:  &quot; + polygons[length-1]);
      });
  
      google.maps.event.addDomListener(document.getElementById('btnrecall'), 'click', function(event) {
  
          $('#btnClear').click();
          console.log($('#btnLoad').val());
          var namefield = $('#btnLoad').val();
          if (namefield !== undefined){
              var polyid = names.indexOf(namefield);
              if (polyid &gt; -1) {
                  var layer = polygons[polyid];
                  console.log(layer);
                  console.log(JSON.parse(JSON.stringify(layer)));
  
  
  
              }else {
                  alert(&quot;no polygon by that name.  Please Try again&quot;);
              }
          }else {
              alert(&quot;please enter a name to continue.&quot;);
          }
  
      });
  
  
  
  }
  </code></pre>