CODEWITHSUNDEEP
angularjsautocompletegoogle-places
Kirit
Kirit

Reputation: 415

Angular google place auto complete not working

I used google autocomplete in my project, it's working fine in local, but not working on server, Here is my code

app.js

angular.module('MaterialApp', [
'ui.router', 'ngAnimate', 'ngMaterial',
'ngSanitize', 'ui.sortable', 'base64',
'angular-md5', 'blockUI', 'oc.lazyLoad',
'ngMdIcons', 'md.data.table', 'highcharts-ng',
'google.places', 'ui.calendar', 'ui.date',
'easypiechart', 'ngFileUpload', 'ngCookies',
"isoCurrency", "ngBootstrap", "datatables", "authService", "companyService" // "templatescache"])

form.html

<div class="form-group group-pro">
                    <div class="group-row col-sm-10 col-sm-push-1"> 
                        <input class="form-control control-set" ng-model="campaign.location_data" name="location_data" type="text" g-places-autocomplete  id="location_data" placeholder="Enter the location you want to target" force-selection="true" autocomplete="on" required=""/>
                        <div ng-show="createCampaignForm.$submitted || createCampaignForm.location_data.$touched" ng-model="createCampaignForm.location_data">
                            <span ng-show="createCampaignForm.location_data.$error.required" class="text-danger">Please enter location data.</span>
                        </div>
                    </div>
                </div>

my controller.js

$scope.$on('g-places-autocomplete:select', function (event, place) {
            console.log(event);
            console.log(place);
            var componentForm = {
                locality: 'city', //city
                administrative_area_level_1: 'region', //state
                country: 'country' //country
            }, place_selection_val = [];
            for (var cFKey in componentForm) {
                $scope.campaign[componentForm[cFKey]] = null;
            }
            for (var i = 0; i < place.address_components.length; i++) {
                var addressType = place.address_components[i].types[0];
                if (componentForm[addressType]) {
                    var val = place.address_components[i].short_name;
                    place_selection_val.push(val);
                    $scope.campaign[componentForm[addressType]] = val;
                }
            }
            $scope.campaign.location_data = place_selection_val.join(', ').replace(/^\s+|\s+$/g, '');
        });

please help me,why it's not working on server.

Upvotes: 0

Views: 1089

Answers (2)

Beny
Beny

Reputation: 165

angular.module('MyTouchModule', ['ui.router', 'ngMaterial', 'ngMessages'])

.config(function( $mdGestureProvider ) {
    $mdGestureProvider.skipClickHijack();
})

Hi This helped me a lot. Googled pretty long for this. The issue was with the conflict between angular material and autocomplete events handling(Listeners). This should help.

Upvotes: 3

Douglas
Douglas

Reputation: 177

If you are using API keys make sure to enable Google Places API Web Service at console.developers.google.com

Do you get any errors you could show in the developers console?

I assume you are including 

   <script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>

Additionally I would check the file path of your script file once it is published to the server

Upvotes: 0

Related Questions