Skip to content

Instantly share code, notes, and snippets.

@kirschbaum
Forked from victorb/app.js
Last active December 4, 2020 16:18
Show Gist options
  • Save kirschbaum/fcac2ff50f707dae75dc to your computer and use it in GitHub Desktop.
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>
@alokroutray
Copy link

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":[]}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment