why am I getting type errors when hovering over map after layers are set?

Question

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, just one.

THe polygon placement is working perfectly (although I'm trying to figure out deleting a polygon vertice), but my problem truly is the console.

after placing a polygon, circle, or rectangle, I started receiving hovering errors on the map:

Uncaught TypeError: Cannot read property 'Sa' of null
    at UV.<anonymous> (onion.js:59)
    at Object._.A.trigger (js?key=AIzaSyALxYexJJN5slLNWWGijb16z2Dys66ASIA&libraries=drawing&callback=initMap:102)
    at UV.handleEvent (onion.js:63)
    at jy._.k.de (map.js:44)
    at Object._.A.trigger (js?key=AIzaSyALxYexJJN5slLNWWGijb16z2Dys66ASIA&libraries=drawing&callback=initMap:102)
    at hq.<anonymous> (common.js:132)
    at Object._.A.trigger (js?key=AIzaSyALxYexJJN5slLNWWGijb16z2Dys66ASIA&libraries=drawing&callback=initMap:102)
    at nq (common.js:87)
    at hq.<anonymous> (common.js:192)
    at hq.<anonymous> (common.js:192)

This error occurs when I hover over the map, and when I move the mouse, it continues to show. I don't know how to figure this out. any wisdom would be greatly appreciated.

Thanks.

UPDATE #1:

I tested against multiple browsers (Opera, Firefox, IE, and Chrome), I am getting the same response plus the following error:

Uncaught TypeError: JSON.parse is not a function
    at lW (onion.js:29)
    at OV.<anonymous> (onion.js:59)
    at Object._.z.trigger (js?key=AIzaSyALxYexJJN5slLNWWGijb16z2Dys66ASIA&v=3&libraries=drawing&callback=initMap:102)
    at OV.handleEvent (onion.js:63)
    at hy._.k.be (map.js:44)
    at Object._.z.trigger (js?key=AIzaSyALxYexJJN5slLNWWGijb16z2Dys66ASIA&v=3&libraries=drawing&callback=initMap:102)
    at aq.<anonymous> (common.js:135)
    at Object._.z.trigger (js?key=AIzaSyALxYexJJN5slLNWWGijb16z2Dys66ASIA&v=3&libraries=drawing&callback=initMap:102)
    at gq (common.js:90)
    at aq.<anonymous> (common.js:200)

Now, I'm not calling JSON.parse specifically, but it sounds like I'm doing it incidentally. Where? and how do I fix it? Thanks!

check this link https://stackoverflow.com/questions/33974901/google-maps-script-error-in-onion-js — Karthik Ganesan, Jun 30 '17 at 16:29
Not seeing those errors in Chrome. You aren't attempting to run on IE11 by any chance are you? (saw errors like that earlier today on IE11 with the API). — geocodezip, Jun 30 '17 at 17:19
ok. change one. I'm testing on all browsers, and it appears I have the error on all of them. IE, chrome, opera, firefox. it happens after I move an object. for some reason map -> hover is causing this error. — arcee123, Jul 03 '17 at 16:11

Kosh · Accepted Answer · 2017-07-03T22:51:07.467

You have made a very nice mistake in this function:

function setJSON(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) + '"}';
    return JSON;
  }

  return 0
}

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.

just use lowercase `json`. variables typically never start with a capital. — Soviut, Jul 03 '17 at 22:53
There is a red mark on my forehead now where I pummeled the wall with it trying to figure this problem out. Thank you so much! — arcee123, Jul 03 '17 at 23:14

why am I getting type errors when hovering over map after layers are set?

UPDATE #1:

1 Answers1

Linked