Google Map API : Cannot read property 'undefined_changed' of undefined

Question

i'm trying to load a google map api with angular. And, i have some problem while loading this one.

Just did everything like they say in the documentation :

    function initialize() {
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(window.document.getElementById("map-canvas"), myOptions);

    }
    google.maps.event.addDomListener(window, "load", initialize);

and in my body :

<body>
 <div id="map-canvas"></div>
</body>

But, when refreshing my page I got this error (which is a little bit difficult to understand) :

Uncaught TypeError: Cannot read property 'undefined_changed' of undefined

Does anyone have an idea about what is wrong?

Thanks !

For me it was just a duplication of a prototype Object.ptorotype.boolToArray, which was added by myself to do some stuff, but the same function was instanciated inside gMap API which rise an error — user3197506, Aug 19 '16 at 06:22
thanks for getting back. I had a similar issue where I was extending object to add some functionality to it. Turns out that maps doesn't like it. — Nirav Gandhi, Aug 19 '16 at 10:58
No problem, i've searched a long time for this solution last year ... The solution I've found which seem the best, was to keep my functions, but put them into a specific library and don't adding them into the object prototype to avoid some errors like this one. — user3197506, Aug 22 '16 at 06:40

score 3 · Accepted Answer · answered Apr 14 '15 at 14:39

3

Find it !

So for those who will have the same problem :

NEVER, never, never, never and never add function to Object like :

Object.prototype.boolToArray = function () {}

answered Apr 14 '15 at 14:39

user3197506

197
1
2
14

Although this answer does not explain why, I have encounted this error, and Prototyping a function like this causes this error. I cannot say why at this stage. My case was Object.prototype.round = function () {...} – Dev Apr 15 '16 at 12:25
I think that's because of they use they own version of boolToArray (for me, round for you) which does some stuff. With adding a new function to the Object prototype that may do something totally different, there is a chance that your function will override the one which is used by google, which make their call to their function problematic – user3197506 Aug 22 '16 at 06:39

score 0 · Answer 2 · edited May 23 '17 at 11:45

0

Are you sure that google maps api is already loaded when you call the operation? When loading script, you can include a callback function that is invoked when the maps api has loaded:

<script src="https://apis.google.com/js/client.js?onload=initialize"></script>

a good example of how to use google maps in angular directive: AngularJS - load google map script async in directive for multiple maps

edited May 23 '17 at 11:45

Community

1
1

answered Apr 14 '15 at 12:14

Gregor Srdic

446
7
10

I tried to include the callback, but nothing change )= I'm going to see this example, maybe i will find the solution ! Thanks – user3197506 Apr 14 '15 at 12:55
In fact, it seems that the error occur when I add the – user3197506 Apr 14 '15 at 13:15
in a script tag, but as I said, the problem was about extending Object with a function boolToArray. It seems that Google Map API doesn't really like that – user3197506 Apr 20 '15 at 06:27

Google Map API : Cannot read property 'undefined_changed' of undefined

2 Answers2