Value from Google GeoCode API Won't Return Properly

Question

I've been struggling with this one error for a project I'm doing in a web design class for about a day now and I am nowhere close to figuring out how to solve it. For the project, I'm using a combination of two API's to read in a user specified location, get the latitude and longitude of that location using the Google GeoCoding API, and then using that latitude and longitude display the current weather of that location. The problem is, no matter what I do, the function I made to return a Location object (name, latitude, and longitude) to the main index.html file script never returns properly, and I believe it might be because it is running asynchronously. I'm a bit new to javascript, so my apologies in advance if I ask a lot of questions to your answers. Here's the code from my location.js file:

class Location
{
    constructor(name = "Dummy Location", lat = 0.0, lng = 0.0)
    {
        this.name = name;
        this.lat = lat;
        this.lng = lng;
    }
}
function geocode(location)
{
    axios.get('https://maps.googleapis.com/maps/api/geocode/json?',
    {
        params: { 
            address: location, 
            key: googleAPIKey
        }
    })
    // Get a reponse from that request
    .then(function(response)
    {
        ///Format the address
        var formattedAddress = response.data.results[0].formatted_address;
        // Get the various address components
        var locationName = `${response.data.results[0].address_components[0].long_name}, ${response.data.results[0].address_components[2].short_name}`;
        var locationLat = response.data.results[0].geometry.location.lat;
        var locationLng = response.data.results[0].geometry.location.lng;
        // Create a new Location based on those components
        var geoLocation = new Location(locationName, locationLat, locationLng);
        // (Debug) Log that location
        console.log(geoLocation);
        // Return that location
        return geoLocation;
    })
    .catch(function(error)
    {
        console.log(error);
    })
}

And here's the code from my index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Cool Weather App</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <link rel = "stylesheet" href="css/styles.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
    <header>
    <div id = "locationinputcontainer">
        <input id="locationfield" type="text" value="Location">
        <input id = "submitbutton" type="submit" value="Submit">
        <input id = "savelocationbutton" type = "submit" value = "Save Location">
    </div>
    </header>
    <div id = "locationweathercontainer">
        <h1 id = "locationname">Dummy Value</h1>
        <h2 id = "weather">Weather</h2>
        <h1 id = "temperature">68&deg;F</h1>
        <h3 id = "precipitation">Precipitation:</h3>
        <h3 id = "humidity">Humidity: </h3>
        <h3 id = "windspeed">Wind Speed: </h3>
    </div>
    <div id = "mylocationscontainer" class = "dropdowncontainer" style = "float:left">
        <h1>My Locations</h1>
        <ol>
        </ol>
    </div>
    <div id = "settingscontainer" class = "dropdowncontainer" style = "float:right">
        <h1>Settings</h1>
    </div>
</body>
<script src = "js/location.js"></script>
<script>
    const locationField = document.querySelector("#locationfield");
    const submitButton = document.querySelector("#submitbutton");
    const saveButton = document.querySelector("#savelocationbutton");
    const locationNameElement = document.querySelector("#locationname");
    const locationsListElement = document.querySelector("#mylocationscontainer");

    const prefix = "asb9599-";
    const storedLocationsKey = prefix + "storedLocations";
    const storedCurrentLocationKey = prefix + "storedCurrentLocation";
    let currentLocation;
    let locationInput;

    /* Functions */
    function UpdateCurrentLocation()
    {
        currentLocation = geocode(locationInput);
        console.log("(index.html) Current Location: " + currentLocation);
        locationNameElement.innerHTML = currentLocation.name;
    }
    /* Events */
    submitButton.onclick = UpdateCurrentLocation;
    locationField.onchange = e => {locationInput = e.target.value};
</script>
</html>

Andddd here's the response I'm getting: Sample Response Image

For clarification, googleAPIKey is defined, it's just above the location class. — Andrew Brook

Anandh Anandh · Accepted Answer · 2018-11-04T13:43:46

params: { 
            address: location, 
            key: googleAPIKey(paste your apikey here)
        }

Get the api key from google and paste it in the place of key.Otherwise it won't work.

Value from Google GeoCode API Won't Return Properly

1 Answers