1

Estou tentando calcular a distância entre esses dois pontos mas não estou conseguindo! Gostaria de descobrir qual o problema.

No console, dá erro um 404:

distancia.html:14 Uncaught ReferenceError: google is not defined
    at distancia.html:14
(anonymous) @ distancia.html:14

Que é essa linha aqui:

var nyc = new google.maps.LatLng(40.715, -74.002);

Eis o código todo:

<!DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <button onclick="myFunction()">Try it</button>

        <script>

            var nyc = new google.maps.LatLng(40.715, -74.002);
            var london = new google.maps.LatLng(51.506, -0.119);
            var distance = google.maps.geometry.spherical.computeDistanceBetween(nyc, london);


            function myFunction() {
                alert(distance);
            }
        </script>
       <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD9A0ThwdhnBC2wLskwCmpWV5aFP1A05pU&libraries=geometry"
    async defer></script>
    </body>
</html>
1

2 Respostas 2

1

Se você incluiu os atributos async defer na tag <script>, o ideal seria puxar a variável distance à partir de uma função. Isso porque se você colocar a variável distance no alert, essa variável ainda não foi definida no carregamento da página, isso porque a API está assíncrona.

A função que puxa seu alert:

function pegaDistancia(){
    var nyc = new google.maps.LatLng(40.715, -74.002);
    var london = new google.maps.LatLng(51.506, -0.119);
    var distance = google.maps.geometry.spherical.computeDistanceBetween(nyc, london);
    return distance;
}

function myFunction() {
    alert(pegaDistancia());
}

function pegaDistancia(){
	var nyc = new google.maps.LatLng(40.715, -74.002);
	var london = new google.maps.LatLng(51.506, -0.119);
	var distance = google.maps.geometry.spherical.computeDistanceBetween(nyc, london);
	return distance;
}

function myFunction() {
	alert(pegaDistancia());
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD9A0ThwdhnBC2wLskwCmpWV5aFP1A05pU&libraries=geometry" async defer></script>
<button onclick="myFunction()">Try it</button>

5
  • Obrigado cara! Ótima explicação , Dei um voto ai para a sua resposta! 4/09/2017 às 21:44
  • Seria possível construir com o google maps API um programa que passado um raio qualquer como parâmetro ele retorne os pontos que pertencem a aquele circulo gerado pelo raio? O que eu deveria usar? Vou apagar essa comentario!! 4/09/2017 às 21:45
  • @PenaPintada Obg pelo voto! Cara, não sei te dizer, não sou especialista em Google Maps. Só consegui responder a sua pergunta pq ela envolve mais lógica de programação do que o Maps em si.
    – Meu ovo
    4/09/2017 às 21:47
  • Valeu então, de qualquer forma ajudou cara! 4/09/2017 às 21:49
  • @PenaPintada Ah, só mais uma coisa pra adicionar à minha resposta: quando vc define a API assíncrona, tanto faz vc chamar a API no início como no fim da página. Já o contrário, a API deve ser chamada antes da funções. Valeu!
    – Meu ovo
    4/09/2017 às 21:51
0

<html>
<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <button onclick="myFunction()">Try it</button>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD9A0ThwdhnBC2wLskwCmpWV5aFP1A05pU&libraries=geometry"></script>
    <script>

        var nyc = new google.maps.LatLng(40.715, -74.002);
        var london = new google.maps.LatLng(51.506, -0.119);
        var distance = google.maps.geometry.spherical.computeDistanceBetween(nyc, london);


        
            alert(distance);
        
    </script>
   
</body>

Tenta assim

4
  • Obrigado! Poderia me explicar sua resposta mais um pouco! Quer dizer que o erro era apenas a posição das tags do javascript? 4/09/2017 às 21:30
  • @PenaPintada, Sim, Voce sempre tem que respeitar as posicoes 4/09/2017 às 21:32
  • 1
    Voce precisa carregar o arquivo javascript (no seu caso o googleapis) antes de poder usar suas funções. Quando quiser colocar o carregamento no fim da pagina você precisa usar um método que execute seu código javascript somente depois que o documento estiver carregado. Que no caso é o window.document.onload = function(e){}
    – Sérginho
    4/09/2017 às 21:37
  • @Sérginho Obrigado cara! Não sabia disso por incrível que pareça! 4/09/2017 às 21:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .