Google Map错误“未捕获的TypeError：无法读取未定义的属性'x'”

Question

I am working with Google map and I wrote a JS code like below and it works perfectly when a user gives location realizing permission by Browser, but when he blocks the permission, the map doesn't show anything and wen I click on its area I get the following error:\\

Error:

Uncaught TypeError: Cannot read property 'x' of undefined

JS SCRIPT:

    var pos = new Object();
    var marker1 = new Object();
    var marker2 = new Object();
    var resp;
    var loc;
    var bus_loc;

    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            //        zoom: 13
        });

        var infoWindow = new google.maps.InfoWindow({});
        var scope = angular.element($("#address")).scope();
        var angLoc;
        scope.$apply(function () {
            angLoc = scope.contact.business.location.split(',');
            bus_loc = {
                lat: parseFloat(angLoc[0]),
                lng: parseFloat(angLoc[1])
            };
        });
        var image = '/static/image/main_template/map/2.png';
        marker2 = new google.maps.Marker({
            map: map,
            position: bus_loc,
            icon: image
        });
        marker2.addListener('click', function() {
            infoWindow.setPosition(bus_loc);
            infoWindow.setContent('<p style="padding: 0; margin-top: 10px; direction: rtl">ساینا</p>');
            infoWindow.open(map, marker2);
        });

        map.setCenter(bus_loc);
        // Try HTML5 geolocation.
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };

                loc = {
                    lat: parseFloat(pos.lat),
                    lng: parseFloat(pos.lng)
                };
                var image = '/static/image/main_template/map/1.png';
                marker1 = new google.maps.Marker({
                    map: map,
                    position: loc,
                    icon: image
                });
                marker1.addListener('click', function() {
                    infoWindow.setPosition(loc);
                    infoWindow.setContent('<p style="padding: 0; margin-top: 10px; direction: rtl">اینجا هستید</p>');
                    infoWindow.open(map, marker1);
                });
                map.setCenter(loc);

                var distanceService = new google.maps.DistanceMatrixService();
                distanceService.getDistanceMatrix({
                        origins: ['' + loc.lat + ',' + loc.lng + ''],
                        destinations: ['' + bus_loc.lat + ',' + bus_loc.lng + ''],
                        travelMode: google.maps.TravelMode.DRIVING,
                        unitSystem: google.maps.UnitSystem.METRIC,
                        durationInTraffic: true,
                        avoidHighways: false,
                        avoidTolls: false
                    },
                    function(response, status) {
                        if (status !== google.maps.DistanceMatrixStatus.OK) {
                            console.log('Error:', status);
                        } else {
                            resp = response;
                            $('#distance').html('<b>فاصله از شما: <b>' + resp.rows[0].elements[0].distance.text);
                            $('#duration').html('<b>زمان تخمینی رسیدن شما به این با خودرو: <b>' + resp.rows[0].elements[0].duration.text);

                        }
                    });



                var bounds = new google.maps.LatLngBounds();
                bounds.extend(marker1.getPosition());
                bounds.extend(marker2.getPosition());

                map.fitBounds(bounds);


            }, function() {
                handleLocationError(true, infoWindow, map.getCenter());
            });
        } else {
            // Browser doesn't support Geolocation
            handleLocationError(false, infoWindow, map.getCenter());
        }




    }

    function handleLocationError(browserHasGeolocation, infoWindow, pos) {
        //    infoWindow.setPosition(pos);
        //    infoWindow.setContent(browserHasGeolocation ?
        //        'مکان جغرافیایی یافت نشد' :
        //        'مرورگر شما امکان نشان دادن مکان جغرافیایی را ندارد.');
    }

What should I do?

Answer 1

不要像这样添加任何原型继承，谷歌地图渲染有问题

    Object.prototype.boolToArray = function () {}

Answer 2

Make sure you're not overriding 'window.self'!

Had the same problem, when I put a break point where the error was thrown in common.js, I saw that it was checking window.self, and window.self did not = window!

My issue: I had created a component and wrote "self = this" instead of "var self = this". I overwrote window.self which caused this error.

Answer 3

This problem is usually due to the map div not being rendered before the javascript runs that needs to access it. you can find answer to this question here in this question

Answer 4

I had the same issue and in my case it was because the IE or the IIS Server blocks some google Maps URLs. You can check it using your developer tools F12 in Network tab and load the page with and without permission. It's probable that you found a google Maps URL with status 4XX. I solved adding the google maps URLs to the trusted sites