Struggling to integrate lat/long data from the user's location into the Google Maps API upon page load and facing an injection error. Being new to Angular, still grappling with understanding how scope functions, so any help is appreciated.
The main file app.js exists in a top-level directory:
var app = angular.module('ForecastApp', []);
In the controllers directory, the main controller calls a getZip function as shown below:
app.controller('ForecastController', ['$scope', 'forecast', function($scope, forecast) {
$scope.getZip = function(){
forecast.getZip($scope.zipFinder).then(function(response){
$scope.response = response.data;
});
}
}]);
Additionally, there is a separate file named getLocation.js that retrieves lat/long data through the navigator:
function getLocation(position) {
navigator.geolocation.getCurrentPosition(getLocation);
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var $latlng = lat + "," + lng; // Questioning if this variable will carry over to the factory
}
There is also a factory file where attempts are made to include the lat/lng data in an http.get request for the API. Unsure of how to access the latlng variable here and considering whether the factory is necessary at all:
app.factory('forecast', ['$http', function($http) {
function getZip(zipFinder) {
$http.get('https://maps.googleapis.com/maps/api/geocode/json?latlng=' + $latlng + '&key=XXXXXXXXXX')
.success(function(data){
return data;
})
}
}]);
The HTML setup:
<body onload="getLocation()" ng-app="ForecastApp">
<div ng-controller="ForecastController">
<div class="zipFinder" ng-model="zipFinder">
<h3>Your zip code is {{ zipFinder.result_type | postal_code }}</h3>
</div>
</div>
</body
Exploring options on combining the getLocation.js and the factory to bring the latlng variable into scope but struggling to achieve success. Seeking assistance on finding a solution to link these two components together.
Appreciate any help.