Accessing a Google Maps API on pageload with Angular

Question

I'm trying to throw lat/long data taken from the user's location into the Google Maps API on page load but I'm stuck.

Getting an injection error. I'm pretty new to Angular and still don't entirely grok how the scope thing works, so be gentle.

My main file app.js is in a top level directory:

var app = angular.module('ForecastApp', []);

In a controllers directory I have the main controller that's calling a getZip function from below:

app.controller('ForecastController', ['$scope', 'forecast', function($scope, forecast) {
  $scope.getZip = function(){
    forecast.getZip($scope.zipFinder).then(function(response){
        $scope.response = response.data;
    });
  }
}]);

I have a separate top level file, getLocation.js, that is grabbing the lat long data from the navigator:

function getLocation(position) {
  navigator.geolocation.getCurrentPosition(getLocation);
  var lat = position.coords.latitude;
  var lng = position.coords.longitude;
  var $latlng = lat + "," + lng; // will the variable carry over to the factory?
}

Finally a factory file where I'm trying include the lat lng data into a http.get request from the API. How do I get the latlng variable here? I have a feeling this is all messed up. Maybe I don't need the factory?

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:

<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

I was considering combining any getLocation.js and the factory to get the latlng variable into scope but it wasn't doing it. There must be a way to get those two together.

Thanks in advance.

score 1 · Accepted Answer · answered Dec 14 '15 at 10:35

Here is a working example of google maps API in an AngularJS project:

http://plnkr.co/edit/34dcQZxHydMI9fFpj8Aq?p=preview

The getMyAddr () method of MainCtrl exemplify the use of geolocation and geocode API without any need of new factory:

  $scope.getMyAddr = function() {
    navigator.geolocation.getCurrentPosition(function(pos) {
      var latlng = pos.coords.latitude +","+ pos.coords.longitude;
      console.log('geolocation: '+latlng);
      $http.get('https://maps.googleapis.com/maps/api/geocode/json?latlng=' + latlng) // + '&key=XXXXXXXXXX')
        .success(function(data){
          console.log('geocode: ', data);
          $scope.results = data.results;
          if (!$scope.$$phase) $scope.$apply();
        });
    }, function(error) {
      alert('Unable to get location: ' + error.message);
    });

}

Thanks dude, that helped. Turns out I was making it way more complicated than it needed it to be. Posted my solution below. — PanicBus, Dec 27 '15 at 07:24

score 0 · Answer 2 · answered Dec 27 '15 at 07:45

Here's my final solution that worked. Turns out I was making it way more complicated than it needed to be.

The JS

app.controller('ForecastController', function($scope, $http) {
  $scope.getLocation = function() {
    // get the location from the HTML navigator
    navigator.geolocation.getCurrentPosition(function(pos) {
    var latlng = pos.coords.latitude +","+ pos.coords.longitude;
    // and plug it into the GMaps API call
    $http.get('https://maps.googleapis.com/maps/api/geocode/json?latlng=' + latlng + '&key=XXXXXXXX')
    .success(function(data){
      $scope.results = data.results;
      $scope.quantity = 1;
    });
  }
});

The HTML

<div ng-init="getLocation()">
  <div ng-repeat="result in results | limitTo:quantity">
    <h2>Your zip code is {{ result.address_components[7].long_name }}</h2>
  </div>
</div>

Accessing a Google Maps API on pageload with Angular

2 Answers2

Linked