JSFiddle - React, Tailwind, and code Playground

by hasanalikaraca

HTML

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<div ng-app="app" ng-controller="mainController">
    Selected place: {{selectedPlace}} <br/>
  
    <input ng-model="selectedPlace" googleplace/>
    
</div>

JavaScript

var app = angular.module('app', []).controller('mainController', ['$scope', function ($scope) {
  
}]);

app.directive('googleplace', function() {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, model) {
            var options = {
                types: [],
                componentRestrictions: {country: 'tr'} //set country here
            };
            scope.googlePlace = new google.maps.places.Autocomplete(element[0], options);

            google.maps.event.addListener(scope.googlePlace, 'place_changed', function() {
                scope.$apply(function() {
                    model.$setViewValue(element.val());                
                });
            });
        }
    };
});