问题

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?

回答1:

do not add any prototye inheritance to like this , google maps rendering has problems with it

    Object.prototype.boolToArray = function () {}

回答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.

回答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

回答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

来源：https://stackoverflow.com/questions/33563960/google-map-error-uncaught-typeerror-cannot-read-property-x-of-undefined

标签

javascript