Access AngularJS scope variable in JavaScript to populate google map

Question

I have a JSON array fetched from MongoDB server using AngularJS which looks like this:

My controller.js:

var app = angular.module('myApp', []);
app.controller('myCtrl',function($scope, $http) {
$scope.stack=[];


$scope.loadData = function(){ 

    var request =$http({
      method: "post",
      url: "my_api",


      headers:{'Content-Type':'application/x-www-form-urlencoded' },
      transformRequest: function() {
            var str = [];
            str.push(encodeURIComponent("collection") + "=" + encodeURIComponent("emergencyalerts"));
            return str.join("&");
        }

    });
    request.success(function(response){
        console.log("success");

    for(var i = 0; i < response.length; i++) {
            $scope.stack.push('new google.maps.LatLng('+response[i].location+')');
        }

        console.log($scope.stack);

    });

};
});

In console:

 $scope.stack= Array ["new google.maps.LatLng(33.75218,-118.29082)",
                     "new google.maps.LatLng(33.77276,-118.20692)",
                     "new google.maps.LatLng(33.90358,-118.18547)",
                     "new google.maps.LatLng(33.80297,-118.08174)"
]

I want to plot these points in Google HeatMap.

My html page:

<body ng-app='myApp' ng-controller='myCtrl' ng-init="loadData()">
<div id="map"></div>
<script>
  var map, heatmap;

  function initMap(getNum) {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,

      center: {lat: 34.022352, lng: -118.285117},
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

     var gradients = {
      color: [
      'rgba(0, 0, 0, 0)',
      'rgba(0, 0, 0, 0)',
      'rgba(0, 0, 0, 0)',
      'rgba(0, 0, 159, 1)',
      'rgba(255, 0, 0, 1)',
      'rgba(255, 0, 0, 1)'
      ]
    };

    heatmap = new google.maps.visualization.HeatmapLayer({
      data: $scope.stack,
      radius: 13,
      opacity: 100,
      map: map
    });
     heatmap.set('gradient', gradients['color']);

  }
</script>

Error: ReferenceError: $scope is not defined

How to resolve it and display lat lng points in real-time by fetching data from Mongo DB?

Muhammed, I have edited my question now! Can you please help me resolve the error? I need to fetch lat-lng points from api and display in real-time on heatmap. — RPS
– RPS, Commented Apr 11, 2017 at 8:09

RPS · Accepted Answer · 2017-04-21 10:41:28Z

2

Rephrasing the above solution:

var $element = $('#div1');
var scope = angular.element($element).scope();
heatmap = new google.maps.visualization.HeatmapLayer({
   data: scope.stack,
   radius: 13,
   opacity: 100,
   map: map
});

Here div1 is the id of the upper most div (i.e. body).

Example:

<body ng-app='myApp' ng-controller='myCtrl' ng-init="loadData()" id="div1">

answered Apr 21, 2017 at 10:41

RPS

691 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Muhammed Neswine · Accepted Answer · 2017-04-11 09:01:55Z

1

The reference error is because $scope is not available outside angular app. For that you have to access the scope using angular.element to access the $scope outside angular app. Do something like this:

var scope = angular.element($("pointerToUppermostDivOfPage").scope();
heatmap = new google.maps.visualization.HeatmapLayer({
  data: scope.stack,
  radius: 13,
  opacity: 100,
  map: map
});

answered Apr 11, 2017 at 9:01

Muhammed Neswine

2,0571 gold badge21 silver badges20 bronze badges

2 Comments

RPS Over a year ago

No it is not bringing out what I expect it do! The API has some location lat-lng points. I need to retrieve those points from DB and display on HeatMap in real-time. Previously I had hardcoded lat-lng points. It was working. I have written code in AngularJS to retrieve the points. I see in console that the points are retrieved. If I give data: scope.stack in the way that you have told, nothing happens :( I want my HeatMap to display the retrieved lat-lng points on HeatMap.

RPS Over a year ago

It works. Thanks! More clear solution: var $element = $('#div1'); var scope = angular.element($element).scope(); Here div1 is the id of the upper most div (i.e. body) Example: <body ng-app='myApp' ng-controller='myCtrl' ng-init="loadData()" id="div1">

Collectives™ on Stack Overflow

Access AngularJS scope variable in JavaScript to populate google map

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related