I give my map the lat and lon but in the map it doesnt take it. can anyone help ?
Image 1 :
Image2 :
this is the controller :
angular.module('todoController', ['ngMap' , 'firebase'])
// inject the Todo service factory into our controller
.controller('mainController', ['$scope' , '$firebaseArray' , function($scope , $firebaseArray ,NgMap , $timeout ) {
// check the ng-map docs for api url and api key
$scope.mapsApiUrl = 'AIzaSyA3ZMA6KlxboXRuA7ItNNSlJp3xcgjaB0M';
$scope.$onInit = onInit;
function onInit that initialize the map
function onInit() {
NgMap.getMap().then(function (mapInstance) {
var center = mapInstance.getCenter();
google.maps.event.trigger(mapInstance, 'resize');
mapInstance.setCenter(center);
$timeout(function () {
$scope.map = mapInstance;
});
}) ; }
firebase reference
// CREATE A FIREBASE REFERENCE
var config = {
apiKey: "AIzaSyAKoDxaWtWmvnDAvMBwddPeGt16gRPzALg",
authDomain: "trackeur-backend.firebaseapp.com",
databaseURL: "https://trackeur-backend.firebaseio.com",
projectId: "trackeur-backend",
storageBucket: "trackeur-backend.appspot.com",
messagingSenderId: "981610558503"
};
firebase.initializeApp(config);
here is the function that run the app
$scope.addTodo = function () {
var lat = firebase.database().ref().child('coordinates').child('lat');
var lon = firebase.database().ref().child('coordinates').child('lon');
setInterval(() => {
lat.on("value", function(snapshot) {
// This isn't going to show up in the DOM immediately, because
// Angular does not know we have changed this in memory.
// $scope.data = snapshot.val();
// To fix this, we can use $scope.$apply() to notify Angular that a change occurred.
$scope.$apply(function() {
$scope.data = snapshot.val();
});
});
lon.on("value", function(snapshot) {
// This isn't going to show up in the DOM immediately, because
// Angular does not know we have changed this in memory.
// $scope.data = snapshot.val();
// To fix this, we can use $scope.$apply() to notify Angular that a change occurred.
$scope.$apply(function() {
$scope.data1 = snapshot.val();
});
});
// here I provide the latitude and longitude to my map
console.log($scope.data +' , '+ $scope.data1 ) ;
$scope.coord ={
lat: $scope.data ,
lon: $scope.data1
} ;
}, 1000);
};
My problem is that I get the latitude and longitude from firebase but when I send them to my HTML It doesn't mark the coordinates I got ,actually it doesn't move at all , here's the marker :
<marker position="[{{$coord.lat}} , {{$coord.lon}}] " icon="car2.png"></marker>
It is better to use only one double curly bracket, {{ }}
, interpolation inside an attribute:
<marker position="{{'['+data+','+data1+']'}}" icon="car2.png">
</marker>
This reduces the number of watchers in the template.
Also use $scope
variables that have been applied from asychronous blocks.