Cannot set property of null

Question

Cannot set property 'actualLocation' of null; I tried declaring all the variables globally so I can use the later but I don't know why I keep getting null when I call a variable and try to set its properties. I' m a beginner at javascript so please have patience;

Any ideas

I marked the error line with: --->

import {
Component,
OnInit
} from '@angular/core';
declare var google: any;

@Component({
selector: 'app-main-screen',
templateUrl: './main-screen.component.html',
styleUrls: ['./main-screen.component.css']
})

export class MainScreenComponent implements OnInit {

public actualLocation: any;
public map: any;
public marker: any;
public circleRadius: any;
public contentString: any;
public infowindow: any;
public options = {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0
};
constructor() {}

ngOnInit() {

    function success(pos) {
        let crd = pos.coords;

        this.actualLocation = {       <------ Cannot set property 'actualLocation' of null
            center: {
                lat: crd.latitude,
                lng: crd.longitude
            },
            radiusValue: 100
        };
    };

    function error(err) {
        console.warn(`ERROR(${err.code}): ${err.message}`);
    };

    navigator.geolocation.getCurrentPosition(success, error, this.options);

    //Generate Map => map;
    function generateMap() {
        this.map = new google.maps.Map(document.getElementById('map'), {
            mapTypeControl: false,
            center: {
                lat: this.actualLocation.center.lat,
                lng: this.actualLocation.center.lng
            },
            zoom: 15,
            zoomControlOptions: {
                position: google.maps.ControlPosition.LEFT_CENTER
            },
            streetViewControlOptions: {
                position: google.maps.ControlPosition.LEFT_CENTER
            },
        });
    }

    //Generate Marker => marker && Radius => radius;
    function generateMarkerAndRadius() {
        this.marker = new google.maps.Marker({
            map: this.map,
            position: this.actualLocation.center
        });

        this.circleRadius = new google.maps.Circle({
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35,
            map: this.map,
            center: this.actualLocation.center,
            radius: Math.sqrt(this.actualLocation.radiusValue) * 100
        });

    }

    //Generate Message => message;
    function generateMessage() {
        this.contentString =
            '<div id="content">' +
            '<p>Hello</p>' +
            '</div>';

        this.infowindow = new google.maps.InfoWindow({
            content: this.contentString
        });

        this.infowindow.open(this.map, this.marker);
    }
}
}

score 3 · Accepted Answer · answered Oct 22 '17 at 16:30

You need to use arrow function, this in this case refers to the function success not the component , change it as

function success((pos) => {
        let crd = pos.coords;

        this.actualLocation = {   
            center: {
                lat: crd.latitude,
                lng: crd.longitude
            },
            radiusValue: 100
        };
    });

Cannot set property of null

1 Answers1