admin管理员组

文章数量:1406308

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?

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?

• javascript
• jquery
• angularjs
• google-maps
• dom-events

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Nov 6, 2015 at 9:54 Alireza GhaffariAlireza Ghaffari 1,11455 gold badges1616 silver badges3131 bronze badges 4

• Line number of the error? – Emmanuel Delay Commented Nov 6, 2015 at 9:59
• Normally no error, but when I click on the map area: mon.js:191 Uncaught TypeError: Cannot read property 'x' of undefined – Alireza Ghaffari Commented Nov 6, 2015 at 10:04
• My first idea: bus_loc should be a "new google.maps.LatLng", not just an object you make yourself with {lat: ..., lng: ...} – Emmanuel Delay Commented Nov 6, 2015 at 11:05
• I userd "new google.maps.LatLng" no change! – Alireza Ghaffari Commented Nov 6, 2015 at 11:56

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

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

    Object.prototype.boolToArray = function () {}

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

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

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

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

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

本文标签：