Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 603
cfl Avatar asked Dec 25 '22 14:12

cfl


2 Answers

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.

like image 141
cfl Avatar answered Jan 08 '23 21:01

cfl


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
  });
like image 36
fabienbranchel Avatar answered Jan 08 '23 23:01

fabienbranchel