How to do geocoding with angular-google-maps

cfl picture cfl · Sep 8, 2015 · Viewed 7.8k times · Source

I have been trying to hours to work out how to use googles geolocation services with the angular module angular-google-maps. Using this module makes it weird and cannot do geolocation in the same manner as with the normal google maps javascript v3 it seems.

e.g:

var geocoder = new google.maps.Geocoder();

Google is undefined..

This is what I have worked out so far:

My angular.module:

 ...'uiGmapgoogle-maps'])

 .config(['uiGmapGoogleMapApiProvider', function (GoogleMapApi) {
                GoogleMapApi.configure({
                  key: 'X',
                  v: '3.20',
                  libraries: 'weather,geometry,visualization' 
                });
              }]);

My angular controller:

.controller(...., function (.., uiGmapGoogleMapApi, GoogleMapApi){

//Map setup stuff

 var geocoder = new GoogleMapApi.Geocoder();
        geocoder.geocode( { 'address': 'something'}, function(results, status) {
         if (status == GoogleMapApi.google.maps.GeocoderStatus.OK) {
           $scope.map.control.getGMap().setCenter(results[0].geometry.location);
           $scope.map.marker.latitude = results[0].geometry.location.lat();
           $scope.map.marker.longitude = results[0].geometry.location.lng();
         } else {
           alert('Geocode was not successful for the following reason: ' + status);
         }
        });

Says Geocoder is undefined. Very confused as to what object to use, uiGmapGoogleMapApi or GoogleMapApi to reference the Geocoder(). And how the geocoder.geocode.. should be set? Please help

Answer

cfl picture cfl · Sep 8, 2015

Realized I can avoid all the problems with just using a http request instead:

 $http.get('https://maps.googleapis.com/maps/api/geocode/json?address=' + 
              address + '&key=X')
      .then(function(coord_results){
         $scope.queryResults = coord_results.data.results;
         $scope.geodata = $scope.queryResults[0].geometry;
       }, 
       function error(_error){
          $scope.queryError = _error;
      });

If someone does know how to solve the above problem without this, please still leave a post.