google-place autocomplete directive does not work when its used twice on a single page

Question

I am using a google-place directive to fill the location. The directive I am using is mentioned below:

app.directive('googlePlaces', function(){
  return {
    restrict:'E',
    replace:true,
    scope: {location:'='},
    template: '<input id="google_places_ac" name="google_places_ac" type="text" class="form-control area_input transition" />',
      link: function($scope, elm, attrs){
              if(attrs.city =='cities'){
                var options = {
                  types: ['(cities)'],
                  componentRestrictions: {country: 'IN'}
                }
              }
              else{
                var options = {
                  componentRestrictions: {country: 'IN'}
                }
              }
              var autocomplete = new google.maps.places.Autocomplete($("#google_places_ac")[0], options);

              google.maps.event.addListener(autocomplete, 'place_changed', function() {
               
                var place = autocomplete.getPlace();
                if(attrs.city =='cities'){
                  $scope.location = $("#google_places_ac")[0].value + '"' +place.geometry.location.lat() + '"' + place.geometry.location.lng();
                }
                else{
                  $scope.location = place.geometry.location.lat() + ',' + place.geometry.location.lng();
                }
                $scope.$apply();
              });
      }
  };
});

<google-places class="form-control location_field" location="location" city='cities' latlngs = "latlngs" ng-model="chosenPlace"></google-places>

But since I need to use it two times on a single page, the second directive does not work, i.e. it does not show autocomplete results. Could anyone please help me fix this issue. Help would be much appreciated.

I'm not very familiar about angularjs but you can try creating two variable ID like `autocomplete1` and `autocomplete2`. With this, you will be able to initialize mutliple autocomplete without having to overwrite other automplete instances.For implementation purposes take a look in this SO [20416058](http://stackoverflow.com/a/20416328/5995040). For a more dynamic example try [this](http://stackoverflow.com/a/28027112/5995040). — Mr.Rebot, Aug 06 '16 at 05:17

score 0 · Accepted Answer · answered Aug 08 '16 at 05:12

0

Thanks a lot for the reply.. I solved the issue, by replacing id(#google_places_ac) with 'elm[0]', where 'ele' is the element parameter passed in the link function, it refers to current element.

answered Aug 08 '16 at 05:12

Prabhjot Kaur

427
3
6
19

google-place autocomplete directive does not work when its used twice on a single page

1 Answers1