Why Am I Getting Type Errors When Hovering Over Map After Layers Are Set?

I have a map that I'm building here: https://www.jsnippet.net/snippet/1437/ It's a drawingmanager solution, where I can draw a circle, square, or polygon. Not multiple layers, ju

Solution 1:

You have made a very nice mistake in this function:

functionsetJSON(Shape) {
  console.log(Shape.type);
  if (Shape.type === "circle") {
    return'{"type":"' + Shape.type + '", "lat":"' + Shape.getCenter().lat() + '", "lng":"' + Shape.getCenter().lng() + '", "radius":"' + Shape.getRadius() + '"  }';
  }
  if (Shape.type === "rectangle") {
    return'{"type":"' + Shape.type + ', "start":"' + Shape.getBounds().getNorthEast() + '", "end":"' + Shape.getBounds().getSouthWest() + '"}';
  }
  if (Shape.type === "polygon") {
    //eturn '{"type":"'+ Shape.type +'"}' + Shape.getPaths();
    vertice = Shape.getPath();
    console.log("vertice count:  " + vertice.getLength());


/* HERE */JSON = '{"type":"' + Shape.type + '", "coordinates": "';
/* ^^^  */


    vertice.forEach(function(xy, i) {
      JSON = JSON + xy.lat() + ' ' + xy.lng() + ', ';
    });

    JSON = JSON.slice(0, -2) + '"}';
    returnJSON;
  }

  return0
}

You're overriding the global JSON object, so JSON do not have its methods anymore.

Fix it by declaring variable whithin the function scope: var JSON = '{"type":"' + Shape.type + '", "coordinates": "';https://www.jsnippet.net/snippet/1440/ Even better rename it to myJSON or whatever.

And better avoid global names like JSON, window, document etc. So you'll avoid a confusion.