-
-
Save kirschbaum/fcac2ff50f707dae75dc to your computer and use it in GitHub Desktop.
| 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> |
Awesome !! Lifesaver
details="chosenPlaceDetails" is not updated in my controller. Any idea why ? Thanks !
Hi, maybe is a noob question but also i've the problem with the "undefined" in controller...if i use $scope.chosenPlaceDetails in controller i get "undefined". Please help!
Hello Yesnoj I approached it by using $watch to see if $scope.chosenPlaceDetails is populated .
$scope.$watch(function ($scope) { return $scope.chosenPlaceDetails }, function () {
if (angular.isDefined($scope.chosenPlaceDetails )) {
console.log($scope.chosenPlaceDetails );
}
});
If any one having tapp issues on android please see this link https://stackoverflow.com/questions/34943536/not-able-to-select-google-map-drop-down-value . just copy paste the answer of abhay kumar.
$scope.disableTap = function() { var container = document.getElementsByClassName('pac-container'); angular.element(container).attr('data-tap-disabled', 'true'); var backdrop = document.getElementsByClassName('backdrop'); angular.element(backdrop).attr('data-tap-disabled', 'true'); angular.element(container).on("click", function() { document.getElementById('pac-input').blur(); }); };
<input id="pac-input" type="text" placeholder="Search Location" data-tap-disabled="true" ng-change='disableTap()' ng-model="search">
Hi,
Thank you for sharing this. My issue is how can I extract only lat and long form this result ?
I am new to angular js. Please guide me.
Result:-
selection is: Banjara Hills, Hyderabad, Telangana, India
details object is: {"address_components":[{"long_name":"Banjara Hills","short_name":"Banjara Hills","types":["sublocality_level_1","sublocality","political"]},{"long_name":"Hyderabad","short_name":"Hyderabad","types":["locality","political"]},{"long_name":"Hyderabad","short_name":"Hyderabad","types":["administrative_area_level_2","political"]},{"long_name":"Telangana","short_name":"Telangana","types":["administrative_area_level_1","political"]},{"long_name":"India","short_name":"IN","types":["country","political"]}],"adr_address":"<span class="extended-address">Banjara Hills, <span class="locality">Hyderabad, <span class="region">Telangana, <span class="country-name">India","formatted_address":"Banjara Hills, Hyderabad, Telangana, India","geometry":{"location":{"lat":17.4138277,"lng":78.43975840000007},"viewport":{"south":17.4016313,"west":78.41737469999998,"north":17.4301997,"east":78.4541438}},"icon":"https://maps.gstatic.com/mapfiles/place_api/icons/geocode-71.png","id":"270974de742a3a7a7236a589a673c622736d7199","name":"Banjara Hills","photos":[{"height":2322,"html_attributions":["<a href="https://maps.google.com/maps/contrib/115966763618104385860/photos">Arya Banerjee"],"width":4128},{"height":3743,"html_attributions":["<a href="https://maps.google.com/maps/contrib/110743467107312365242/photos">Sai krishna Reddy"],"width":5612},{"height":3096,"html_attributions":["<a href="https://maps.google.com/maps/contrib/112540681264251892936/photos">Muhammad Maseeh ullah Khan"],"width":4128},{"height":3000,"html_attributions":["<a href="https://maps.google.com/maps/contrib/111166319390201928275/photos">Srinivas Shastri"],"width":4000},{"height":1440,"html_attributions":["<a href="https://maps.google.com/maps/contrib/115456674788909736708/photos">Naren Chandra"],"width":2560},{"height":700,"html_attributions":["<a href="https://maps.google.com/maps/contrib/103794174443529416150/photos">Naresh Edara"],"width":1600},{"height":3168,"html_attributions":["<a href="https://maps.google.com/maps/contrib/117407300750364217377/photos">Lokesh Durbha"],"width":4752},{"height":3119,"html_attributions":["<a href="https://maps.google.com/maps/contrib/108269796629331845712/photos">Raji E"],"width":4159},{"height":1840,"html_attributions":["<a href="https://maps.google.com/maps/contrib/107689909642948560241/photos">Sreenadh Reddy"],"width":3280},{"height":3263,"html_attributions":["<a href="https://maps.google.com/maps/contrib/109245430594899774391/photos">Siddharth Moghe"],"width":2610}],"place_id":"ChIJpTDC5yiXyzsRoMr39VKX9Qs","reference":"CmRbAAAAYuVOssw2FhSmYjDSTh7HqxfYhYAjRG7u7_NxM6XUJ1uYKQAL8pUPzIJ6qSCIER4izm_k_qQxW6hwj1rbk5AYDatQpM-SEJUacR7EJblTCb6MFHrKSazQVUuLPJ2d8LKwEhAn-UNLfgmNppd6G_CopBQ8GhSJJZm5iX_ESOpurib7vlVKyB8Wcw","scope":"GOOGLE","types":["sublocality_level_1","sublocality","political"],"url":"https://maps.google.com/?q=Banjara+Hills,+Hyderabad,+Telangana,+India&ftid=0x3bcb9728e7c230a5:0xbf59752f5f7caa0","utc_offset":330,"vicinity":"Banjara Hills","html_attributions":[]}
Muchas gracias :)