Javascript — Getting value of variable in another controller scope method

Question

Working with the google maps api (geolocation). Here is the code in question.

    var lat;
    var lng;
    var moveLat;
    var moveLng;
    var moveMarker;
    var marker;

    $scope.initMap = () => {

        // TODO:Privilege Check!

        var checkPrivilege = false;

        console.log("Clicked Generate Map Pin");

        var x = document.getElementById("demo");

        if (navigator.geolocation) {

            navigator.geolocation.getCurrentPosition(function (position) {

                lat = parseFloat(position.coords.latitude);
                lng = parseFloat(position.coords.longitude);
                console.log("Lat " + lat + " Lng " + lng);

                // The location of current user
                var CMU_SV = {lat: parseFloat(lat), lng: parseFloat(lng)};

                // The map, centered at current user
                var map = new google.maps.Map(
                    document.getElementById('map'), {zoom: 4, center: CMU_SV});

                map.setOptions({ minZoom: 15, maxZoom: 20 });

                // True for admin user
                if (checkPrivilege) {

                    // The marker, positioned at current user's position
                    moveMarker = new google.maps.Marker({position: CMU_SV, flat: false, map: map, draggable: true});
                }
                // False for regular user
                else {

                    //var moveMarker = new google.maps.Marker({position: CMU_SV, flat: false, map: map, draggable: true});
                    marker = new google.maps.Marker({position: CMU_SV, map: map});
                }
            });
        } else {
            x.innerHTML = "Geolocation is not supported by this browser.";
        }
    };

    $scope.sendLocationInfo = () => {

        var checkPrivilege = false;

        if (checkPrivilege) {

            moveLat = parseFloat(moveMarker.getPosition().lat);
            moveLng = parseFloat(moveMarker.getPosition().lng);

            console.log(moveLat, moveLng);
            $scope.LocationInfo = moveLat + "," + moveLng;
            $scope.hasLocationInfo = true;
        }
        else {

            lat = parseFloat(marker.getPosition().lat);
            lng = parseFloat(marker.getPosition().lat);

            console.log(lat, lng);
            $scope.LocationInfo = lat + "," + lng;
            $scope.hasLocationInfo = true;
        }

        var currentUser = $cookies.get('userName');

        $scope.message = currentUser + " has shared their location!";

        client.sendLocationInfo(currentUser, $scope.LocationInfo, $scope.hasLocationInfo)
            .then(() => {
                $scope.LocationInfo = "";
            });

        client.sendPublicWallMessage($scope.message)
            .then(() => {
                $scope.message = '';
            })
    };

As you can see, I initialize 6 var's at the beginning -- outside of initMap and sendLocationInfo.

There are also two map markers (moveMarker and marker). The moveMarker can be moved by the admin user if so desired.

In the second function, I am trying to call each map marker to get the latitude and longitude information -- assign them to their respective variables and then save these coordinates in my DB.

However, for console.log(moveLat, moveLng) and console.log(lat, lng) -- I am getting two NaN values instead of the desired coordinates.

Any way to fix this?

Answer 1

Your code is correct. But the value being returned to parseFloat in moveMarker.getPosition().lat may be a string or other value that can't be parsed as a float value.