CODEWITHSUNDEEP
javascriptangularjsgoogle-mapsgoogle-maps-api-3angular-google-maps
cfl
cfl

Reputation: 1059

How to do geocoding with angular-google-maps

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

Upvotes: 4

Views: 13551

Answers (2)

fabienbranchel
fabienbranchel

Reputation: 554

I had the same problem in doing that :

  uiGmapGoogleMapApi.then(function(apiMaps) {
       var geocoder = new apiMaps.Geocoder();
       console.log(geocoder); //undefined
  });

My solution :

  uiGmapGoogleMapApi.then(function(apiMaps) {
       var geocoder = new google.maps.Geocoder();
       console.log(geocoder); //object
  });

Upvotes: 2

cfl
cfl

Reputation: 1059

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.

Upvotes: 9

Related Questions