Problems with javascript and google maps API

Question

Problems with javascript and google maps API

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I'm trying to calculate the distance between these two points but I can not! I would like to find out what the problem is.

On the console, a 404 error occurs:

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

What is this 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

asked by anonymous 04.09.2017 / 23:08

2 answers

1

If you included the async defer attributes in the <script> tag, you would ideally pull the distance variable from a function. This is because if you put the variable distance in alert , this variable has not yet been set at page load, 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"asyncdefer></script><buttononclick="myFunction()">Try it</button>

04.09.2017 / 23:40

How to send parameter to ActionResult? Create a procedure in PostGreSql

score 0 · Accepted Answer

<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 this out