Erro de mapa do Google “Uncaught TypeError: não é possível ler a propriedade ‘x’ de undefined”

Eu estou trabalhando com o mapa do Google e eu escrevi um código JS como abaixo e ele funciona perfeitamente quando um usuário dá permissão percebendo localização pelo navegador, mas quando ele bloqueia a permissão, o mapa não mostra nada e quando clico em sua área eu obtenha o seguinte erro: \

Erorr:

Incorreto TypeError: Não é possível ler a propriedade ‘x’ de undefined

SCRIPT DE JS:

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('

ساینا

'); 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('

اینجا هستید

'); 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('فاصله از شما: ' + resp.rows[0].elements[0].distance.text); $('#duration').html('زمان تخمینی رسیدن شما به این با خودرو: ' + 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 ? // 'مکان جغرافیایی یافت نشد' : // 'مرورگر شما امکان نشان دادن مکان جغرافیایی را ندارد.'); }

O que devo fazer?

não adicione nenhuma inheritance de prototye para isso, a renderização do google maps tem problemas com isso

  Object.prototype.boolToArray = function () {} 

Certifique-se de que você não está ignorando ‘window.self’!

Tive o mesmo problema, quando eu coloquei um ponto de quebra onde o erro foi lançado em common.js, vi que estava verificando window.self e window.self não = window!

Meu problema: eu criei um componente e escrevi “self = this” em vez de “var self = this”. Eu substituí window.self que causou esse erro.

Esse problema geralmente é causado pelo fato de o map div não ser renderizado antes da execução do javascript que precisa acessá-lo. você pode encontrar resposta para esta pergunta aqui nesta questão

Eu tive o mesmo problema e no meu caso foi porque o IE ou o servidor IIS bloqueia alguns URLs do Google Maps. Você pode verificá-lo usando suas ferramentas de desenvolvedor F12 na guia Rede e carregar a página com e sem permissão. É provável que você tenha encontrado um URL do Google Maps com status 4XX. Resolvi adicionar os URLs do Google Maps aos sites confiáveis