ShowPosition with GeoLocation bound to class

Question

I'm new with JavaScript but I wanted to wrap the GeoLocation code in a class. However when I do this. The this.ShowPoisition() call doesn't actually bind this and if I console log I get window instead. Is there any way to bind this. I know I could call getElementById in ShowPosition but that would deafeat my purpose.

function LocationClass()
{
     this.map = null;
     this.divLocation = null;

this.Initialize = function()
{
    this.divLocation = document.getElementById("Location");

    this.map = new google.maps.Map(document.getElementById('Map'), 
    {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 10,
      fullscreenControl: false,
      mapTypeControl: false,
      scrollwheel: false,
      zoomControl: false,
      streetViewControl: false
    });

    console.log(this.divLocation);
}

this.UpdateMap = function(aLong, aLat)
{
    this.map.panTo({lat: aLat, lng: aLong});
}

this.GetLocation = function()
{
    if (navigator.geolocation) 
    {
        navigator.geolocation.getCurrentPosition(this.ShowPosition, this.ShowError);
    } 
    else 
    {
        this.divLocation.innerHTML = "Geolocation is not supported by this browser.";
    }
}

this.ShowPosition = function(aPosition)
{
    this.divLocation.innerHTML = "<strong>Latitude:</strong> " + aPosition.coords.latitude +
    "<br><strong>Longitude:</strong> " + aPosition.coords.longitude;
    var geocoder = new google.maps.Geocoder();
    var location = new google.maps.LatLng(aPosition.coords.latitude, aPosition.coords.longitude);       
    geocoder.geocode({ 'latLng': location }, function (results, status) 
    {
        if (status == google.maps.GeocoderStatus.OK)
        {           
            //var add = results[0].formatted_address;
            let city = "";
            let components = results[0].address_components;
            for (var component = 0 ; component < components.length; component++)
            {
                if (components[component].types[0] == "postal_town")
                {
                    city = components[component].long_name;
                }
            }
            this.divLocation.innerHTML += "<br><strong>City:</strong> " + city + "</strong>";
        }
    });

    weatherApp.GetWeatherByCoords(aPosition.coords.latitude, aPosition.coords.longitude);
}

this.ShowError = function(aError)
{
    switch(aError.code) 
    {
        case aError.PERMISSION_DENIED:
        this.divLocation.innerHTML = "User denied the request for Geolocation."
            break;
        case aError.POSITION_UNAVAILABLE:
        this.divLocation.innerHTML = "Location information is unavailable."
            break;
        case aError.TIMEOUT:
        this.divLocation.innerHTML = "The request to get user location timed out."
            break;
        case aError.UNKNOWN_ERROR:
        this.divLocation.innerHTML = "An unknown error occurred."
            break;
    }
}
}

score 1 · Accepted Answer · answered Mar 07 '18 at 20:17

1

'this' is a reserved keyword in javascript and is determined by the scope in which it is used. You cannot bind anything to it.

Here is a question that has some good resources to better understand the 'this' keyword:

How does the "this" keyword work?

If you need to pass the value of 'this' in one function/scope elsewhere, save it to a variable and use that variable to recall it.

answered Mar 07 '18 at 20:17

Ryan Gibbs

1,178
10
24

I believe if you use .bind(), you are overwriting the prototype. – Ryan Gibbs Mar 07 '18 at 22:15

ShowPosition with GeoLocation bound to class

1 Answers1