Google Maps - How to determine if point falls with a circle and plot to map

Question

I'm working with Angular, the ng-maps directive, and multiple social media APIs. First, I'm retrieving the data from the API, calculating whether it's in the search circle using google.maps.geometry.spherical.computeDistanceBetween(latLng, center) <= radius which I got from this SO question (as well as this one) and then pushing it into an array containing the results which then plots the map markers onto the map.

I can't seem to get anything returned with the true value as the array is empty.

Here is the code:

  $scope.radius = 1000;
    $scope.lat = 48.0028;
    $scope.lng = 37.8060; 

$scope.searchCircle = {
        position: [$scope.lat, $scope.lng],
        radius: $scope.radius
    };

$scope.mapSearch = function(){
            if ($scope.vkLoading || $scope.igLoading || $scope.twtLoading) return;
            $scope.resultPosts.length = 0;
            console.log('Lat: '+$scope.lat+' Lng: '+$scope.lng+' Radius: '+$scope.radius+' Start: '+$scope.startDate+' End: '+$scope.endDate);
            if ($scope.locationSearch.dataSource.vk){
                $scope.vkLoading = true;
                console.log('search Vk');
                OSINTAPIRequest.vkSearch($scope.lat, $scope.lng, $filter('unixTimestamp')($scope.startDate, 'sec'), $filter('unixTimestamp')($scope.endDate, 'sec'),$scope.radius).then(function(data){
                        if (data.error){
                            toastr.error(data.error.error_msg, 'VkError['+data.error.error_code+']');
                        } else {
                            if (data.response.items.length > 0){
                                for(var i=0; i < data.response.items.length; i++){
                                    /*  Adjust for faulty radius */

                                $scope.markerPoints = [];

                                    $scope.postLat = data.response.items[i].lat;
                                    $scope.postLng = data.response.items[i].long;
                                    $scope.postLatLng = [$scope.postLat,$scope.postLng];

                                    $scope.markerPoints.push($scope.postLatLng);

                                     if (google.maps.geometry.spherical.computeDistanceBetween($scope.markerPoints, $scope.searchCircle.position) <= $scope.radius) {
                                            $scope.resultPosts.push({SourcePostID: data.response.items[i].id, 
                                                    SourcePosterID : data.response.items[i].owner_id,
                                                    Timestamp : parseInt(data.response.items[i].date),
                                                    PostTitleTimestamp: $filter('timestamp')(data.response.items[i].date, 'title'),
                                                    PostTimestamp : $filter('timestamp')(data.response.items[i].date),
                                                    PostLatitude : data.response.items[i].lat,
                                                    PostLongitude : data.response.items[i].long,
                                                    PostMedia: data.response.items[i].photo_604,
                                                    PostContent: data.response.items[i].text,
                                                    PostType: 'image',
                                                    PostAvatar: 'https://pingendo.github.io/pingendo-bootstrap/assets/user_placeholder.png',
                                                    PostMarker: 'assets/img/vkMarker.png',
                                                    PostUsername : 'User ID ('+data.response.items[i].owner_id+')',
                                                    DataSource: 'vk'});
                                        //console.log('Vk Timestamp: '+parseInt(data.response.items[i].date));
                                    } 

                            } else {
                            }
                            $scope.vkLoading = false;
                        }
                    }, function(error){
                        $scope.vkLoading = false;
                        console.log(error);
                        toastr.error('Unable to connect to server!','Server Error['+error.status+']');
                });
            }

I think I'm missing something extremely obvious and simple... any ideas as to what the issue is?

EDIT: here is the demo... http://plnkr.co/edit/3rO8K1j8GVXd8JyBzvrm?p=preview

when I add in the distance calculation (commented out) it doesn't add any markers to the array.

Too many unknowns here. Create a demo that replicates problem — charlietfl, Aug 10 '15 at 16:46
perhaps I included too much of the code. I guess the real question is how to properly implement the ` if (google.maps.geometry.spherical.computeDistanceBetween($scope.markerPoints, $scope.searchCircle.position) <= $scope.radius) ` statement by pushing the lat long of the items that fall within the circle. — cmgsakell, Aug 10 '15 at 16:51
what does `computeDistanceBetween` evaluate to? We have no idea if condition is met or not. Also is `OSINTAPIRequest.vkSearch` using `$http` or third party api? If not within angular would need `$apply()` — charlietfl, Aug 10 '15 at 16:54
computeDistanceBetween calculates the distance between the two lat lngs (https://developers.google.com/maps/documentation/javascript/geometry#Distance) which I then am comparing to the radius (<= $scope.radius) and then I want to plot the point, if the calculated distance is less than or equal to $scope.radius. OSINTAPIRequest.vkSearch is calling the $http request within my services.js. — cmgsakell, Aug 10 '15 at 17:07
If I remove the if statement containing the calculatio, everything is pushed to the results array and plotted as expected. But when i add the statement, it doesn't show up. I'm trying to create a demo as we speak. — cmgsakell, Aug 10 '15 at 17:08
http://plnkr.co/edit/3rO8K1j8GVXd8JyBzvrm?p=preview here is the demo — cmgsakell, Aug 10 '15 at 18:01
use `console.log(google.maps.geometry.spherical.computeDistanceBetween($scope.markerPoints, $scope.searchCircle.position)` will see it is `NaN` — charlietfl, Aug 10 '15 at 19:47

score 1 · Answer 1 · answered Aug 10 '15 at 21:14

Thanks Charlie! I had to create a google maps LatLng object and pass that to the function.

var p1 = new google.maps.LatLng(data[i].lat, data[i].long);
var p2 =  new google.maps.LatLng($scope.lat, $scope.lng);

Here is the working solution: http://plnkr.co/edit/u8ihWual5xsivkHJyu3y?p=preview

Google Maps - How to determine if point falls with a circle and plot to map

1 Answers1