CODEWITHSUNDEEP
angularjsgoogle-maps-api-3angular-google-maps
fotoflo
fotoflo

Reputation: 967

how to use GooglePlacesServices with angular-google-maps

I have a map and search-box instantiated and dropping a marker after search is completed. This is working properly, however, I want to query the places services to get places nearby where my marker is dropped and I am getting an error that when running: google.maps.places.PlacesService(map) Uncaught TypeError: undefined is not a function...

Below is some relevant code In my Angular.module.config:

uiGmapGoogleMapApiProvider.configure({
  v: '3.17',
  libraries: 'places'
});

In my maps controller:

1) callback when loaded

uiGmapGoogleMapApi.then(function(maps) {
  $scope.googleMapsObject = maps;
});

2) setup the event handler to create the marker

$scope.searchbox = {
  events: {
      places_changed: placesChangedHandler
  }
}

3) handle when places are changed, set the marker for lat, and (LAST LINE IS THE PROBLEM) query for the name of the place.

function placesChangedHandler(searchBox) {
  var lat = searchBox.getPlaces()[0].geometry.location.k;
  var lgn = searchBox.getPlaces()[0].geometry.location.C;
  var center = { latitude: lat , longitude: lgn };
  $scope.address = searchBox.getPlaces()[0].adr_address;
  $scope.map = {
    center: center, zoom: 15
  };
  setMarker(center);
  var service = new google.maps.places.PlacesService($scope.googleMapsObject); 
 // service.nearbySearch(request, callback);
}

The error is on that second to last line. (also, is there a cleaner way to get to those variables?)

Thanks in advance for your help!

Upvotes: 3

Views: 1938

Answers (3)

Mitko Tschimev
Mitko Tschimev

Reputation: 1

After you initialize it with 'places' as library you should have the places property in the api parameter

uiGmapGoogleMapApi.then(function(maps) {
  maps.places.PlacesService() // -> here you can search for something
});

Upvotes: 0

Dennis Smolek
Dennis Smolek

Reputation: 8770

I think the issue is you are trying to load the places service on the "maps" returned value which is the google.maps object.

so:

$scope.googleMapsObject == google.maps

what you need is to either use the markers directive (which I havent tried yet) or go on the actual map object for your map which you can get from the tilesLoaded event.

$scope.map = {
   events: {
     tilesloaded: function (map) {
        $scope.$apply(function () {
            $scope.actualMapObj = map;
            $log.info('this is the map instance', map);
        });
     }
   }
}

tilesLoaded from faq: http://angular-ui.github.io/angular-google-maps/#!/faq

Upvotes: 0

floodkoff
floodkoff

Reputation: 98

I faced the same problem recently and it took time to understand what is wrong because I'm new to angular (to be honest I'm new to Java Script;) )

In your controller you need add $window dependency to access global object google. Here is how it can look like:

.controller('mapCtrl', ['$scope', '$window', 'uiGmapGoogleMapApi'
    , function($scope, $window, GoogleMapApi) {
  GoogleMapApi.then(function(map) {
    $scope.googleVersion = map.version;
    $scope.map = { center: { latitude: 59.9500, longitude: 10.7500 }, zoom: 11 };
    $scope.googleMapsObject = map

    var service = new $window.google.maps.places.PlacesService($scope.googleMapsObject);
  });
}])

Upvotes: 0

Related Questions