Problems with javascript and google maps API

Asked

Viewed 403 times

1

I’m trying to calculate the distance between these two points but I’m not getting it! I’d like to find out what the problem is.

On the console, gives error a 404: 

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

That’s that line here: 

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

Here’s the whole code:

<!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>
javascript google-maps variables
  • 1

    @Tmc See this: https://pt.meta.stackoverflow.com/q/6300/132 - This is one of the reasons I rejected this: https://answall.com/review/suggested-edits/129525

2 answers

1

If you included the attributes async defer on the tag <script>, the ideal would be to pull the variable distance from a function. That’s because if you put the variable distance in the alert, this variable has not yet been defined in page loading, because the API is asynchronous.

The function that pulls your 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>

  • Thanks man! Great explanation , I gave a vote there for your answer!

  • Would it be possible to build with google maps API a program that passed any radius as parameter it returns the points belonging to that circle generated by the radius? What should I use? I’ll delete that comment!!

  • @Penapintada Obg for the vote! Dude, I can’t tell you, I’m no Google Maps expert. I was only able to answer your question because it involves more programming logic than Maps itself.

  • Thanks then, anyway you helped man!

  • @Penapintada Ah, just one more thing to add to my answer: when you define the asynchronous API, it doesn’t matter if you call the API at the beginning or at the end of the page. Otherwise, the API must be called before the functions. Thanks!

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>

Try it this way

  • Thank you! Could you explain your answer a little more! I mean the error was just the position of the javascript tags?

  • @Penada pintada, Yes, You always have to respect the positions

  • 1

    You need to load the javascript file (in your case googleapis) before you can use its functions. When you want to place the upload at the bottom of the page you need to use a method that will execute your javascript code only after the document is loaded. Which in this case is the window.document.onload = function(e){}

  • @Sérginho Thanks man! I did not know this by incredible it seems!

Browser other questions tagged javascript google-maps variables

You are not signed in. Login or sign up in order to post.