CODEWITHSUNDEEP
jqueryangularjsgoogle-maps
rayjonnes
rayjonnes

Reputation: 21

Google Maps Autocomplete to get input slot result only City name but not full Adress

Good day,

I am making a form where there is 2 input slots: "Departure City" and "Destination City"

I use that solution (done not by me) and I guess it is Angular solution - http://plnkr.co/edit/il2J8qOI2Dr7Ik1KHRm8?p=preview

<input type="text" id="Autocomplete" class="form-control" ng-autocomplete="result2" details="details2" options="options2"/>

angular.module( "Test", ['ngAutocomplete'])
  .controller("TestCtrl",function ($scope) {

    $scope.result2 = '';
    $scope.options2 = {
      country: 'us',
      types: '(cities)'
    };    $scope.details2 = '';
  });

but there is a problem - where we start to type Dallas and we got an Google suggestion "Dallas, TX, United States" and if we click to confirm it the input sets to "Dallas, TX, United States" and I need only "Dallas" as a result in input slot.

For example: 1) we need Departure City as Dallas 2) we start to type "dall" and we got a list of suggestions by Google 3) we click on 1st one - Dallas, TX, United States and 4) in our input slot we got "Dallas" but not "Dallas, TX, United States" as right now at present state of that service

Really I dont get how update that solution (http://plnkr.co/edit/il2J8qOI2Dr7Ik1KHRm8?p=preview) to make that working in my way.

Upvotes: 1

Views: 469

Answers (1)

corn3lius
corn3lius

Reputation: 4985

The getPlace() returns this structure :

{"address_components":[{"long_name":"Dallas","short_name":"Dallas","types":["locality","political"]},{"long_name":"Dallas County","short_name":"Dallas County","types":["administrative_area_level_2","political"]},{"long_name":"Texas","short_name":"TX","types":["administrative_area_level_1","political"]},{"long_name":"United States","short_name":"US","types":["country","political"]}],"adr_address":"<span class=\"locality\">Dallas</span>, <span class=\"region\">TX</span>, <span class=\"country-name\">USA</span>","formatted_address":"Dallas, TX, USA","geometry":{"location":{"lat":32.7766642,"lng":-96.79698789999998},"viewport":{"south":32.617537,"west":-96.99894130000001,"north":33.0237921,"east":-96.46373790000001}},"icon":"https://maps.gstatic.com/mapfiles/place_api/icons/geocode-71.png","id":"fa589a36153613fc17b0ebaebbea7c1e31ca62f0","name":"Dallas","photos":[{"height":2322,"html_attributions":["<a href=\"https://maps.google.com/maps/contrib/103240547556009569847/photos\">Robert Rogers</a>"],"width":4128},{"height":728,"html_attributions":["<a href=\"https://maps.google.com/maps/contrib/103202508011395907641/photos\">Blake Margolis RowlettSachseScanner</a>"],"width":1440},{"height":1579,"html_attributions":["<a href=\"https://maps.google.com/maps/contrib/110350056655658805900/photos\">Ramil Soy</a>"],"width":2807},{"height":2366,"html_attributions":["<a href=\"https://maps.google.com/maps/contrib/111265500346815453367/photos\">Wolfgang Demino</a>"],"width":3619},{"height":4387,"html_attributions":["<a href=\"https://maps.google.com/maps/contrib/103960188949347184478/photos\">Thang Tran</a>"],"width":6000},{"height":2304,"html_attributions":["<a href=\"https://maps.google.com/maps/contrib/117980955401126505428/photos\">Nymisha Bandi</a>"],"width":4096},{"height":2221,"html_attributions":["<a href=\"https://maps.google.com/maps/contrib/113732984326979786649/photos\">Volkan Yuksel</a>"],"width":5692},{"height":665,"html_attributions":["<a href=\"https://maps.google.com/maps/contrib/101875825735695083663/photos\">Accounting Department</a>"],"width":1000},{"height":3519,"html_attributions":["<a href=\"https://maps.google.com/maps/contrib/102844598608092286357/photos\">LCP360 Production</a>"],"width":5760},{"height":1152,"html_attributions":["<a href=\"https://maps.google.com/maps/contrib/105626597651962458040/photos\">K. Osgood</a>"],"width":2048}],"place_id":"ChIJS5dFe_cZTIYRj2dH9qSb7Lk","reference":"CnRsAAAAd4lD76ntfuCVsOakSCHjeWZEdxuVIKsnv86z3u9Fq1A12QTRvj6SSS4O4ZE9Apvq_wWT8r4ux3lT8FDvIDD6EWNKHiUVyhhxw-1yMClXawE20mV8_xPGXz2UKPoKSSbZmqH1rzlIqVTuOeKMt_5OBRIQLtW-4AspRKSG4Mv_fEbrERoUrJyRcYEoY4CbwPyC77PXO70_1_c","scope":"GOOGLE","types":["locality","political"],"url":"https://maps.google.com/?q=Dallas,+TX,+USA&ftid=0x864c19f77b45974b:0xb9ec9ba4f647678f","utc_offset":-300,"vicinity":"Dallas","html_attributions":[]}

So we could easily parse the details to get what you want.

Heres a fork of the original sample that just shows the short name for example. http://plnkr.co/edit/6egntT9xl4eZVJg6HoWj?p=preview

Then set the elements value to the .name instead of the result.

Plunker was updated

Edits

In the newAutoComplete function I just commented out the line that was setting the text box to the formatted string from the autoComplete service.

//scope.ngAutocomplete = element.val(); // the formatted string is in the text box. 
scope.ngAutocomplete = scope.details.name; // we just want the name field. 
element[0].value = scope.details.name;  // you could use other parts of the object above if need be.

Upvotes: 1

Related Questions