kirschbaum · December 4, 2020 16:18 · alokroutray · Oct 23, 2017
diff --git a/app.js b/app.js
 var myApp = angular.module('myApp', []);

 myApp.directive('googleplace', function() {
    return {
        require: 'ngModel',
        scope: {
            ngModel: '=',
            details: '=?'
        },
        link: function(scope, element, attrs, model) {
            var options = {
                types: [],
                componentRestrictions: {}
            };
            scope.gPlace = new google.maps.places.Autocomplete(element[0], options);

            google.maps.event.addListener(scope.gPlace, 'place_changed', function() {
                scope.$apply(function() {
                    scope.details = scope.gPlace.getPlace();
                    model.$setViewValue(element.val());                
                });
            });
        }
    };
 });
 //myApp.factory('myService', function() {});

 function MyCtrl($scope) {
    $scope.gPlace;
 }
diff --git a/index.html b/index.html
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
 <div ng-app="myApp" ng-controller="MyCtrl">
    <div>Google Places Autocomplte integration in Angular</div>
    <div>To Test, start typing the name of any Indian city</div>
    <div>selection is: {{chosenPlace}}</div>
    <div>details object is: {{chosenPlaceDetails}}</div>
    <div><input ng-model="chosenPlace" details="chosenPlaceDetails" googleplace/></div>
 </div>
	var myApp = angular.module('myApp', []);

	myApp.directive('googleplace', function() {
	return {
	require: 'ngModel',
	scope: {
	ngModel: '=',
	details: '=?'
	},
	link: function(scope, element, attrs, model) {
	var options = {
	types: [],
	componentRestrictions: {}
	};
	scope.gPlace = new google.maps.places.Autocomplete(element[0], options);

	google.maps.event.addListener(scope.gPlace, 'place_changed', function() {
	scope.$apply(function() {
	scope.details = scope.gPlace.getPlace();
	model.$setViewValue(element.val());
	});
	});
	}
	};
	});
	//myApp.factory('myService', function() {});

	function MyCtrl($scope) {
	$scope.gPlace;
	}
	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
	<div ng-app="myApp" ng-controller="MyCtrl">
	<div>Google Places Autocomplte integration in Angular</div>
	<div>To Test, start typing the name of any Indian city</div>
	<div>selection is: {{chosenPlace}}</div>
	<div>details object is: {{chosenPlaceDetails}}</div>
	<div><input ng-model="chosenPlace" details="chosenPlaceDetails" googleplace/></div>
	</div>