Example: Address Completion on Google's Geocoding Service

The Google Geocoding API provides a direct way to access a geocoder via an ... FROM json WHERE ' + 'url="http://maps.googleapis.com/maps/api/geocode/json? YUI > Widgets > AutoComplete > Example:AddressCompletiononGoogle'sGeocodingService Version3.17.2 Example:AddressCompletiononGoogle'sGeocodingService ThisexampledemonstrateshowtoprovideAutoCompletesuggestionsfor anaddresscallingGoogle'sGeocodingService. Geocodingistheprocessofconvertingaddressesintogeographic coordinates.TheGoogleGeocodingAPI providesadirectwaytoaccessageocoderviaanHTTPrequest. Google'sGeocodingServicereturnsaJSONobjectliteral.Theservicedoes notprovideaJSONPAPI.AutoCompletecannotusethatobject directlyforsecurityreasons.Sotheworkaroundiscallingtheservice usingYQLassource. Note:Ifthegeocodingserviceisunavailable,youcantrythisexamplewithmockdata.Trytypingin"10mainst"toseetheresults. Enteranaddress: Latitude: Longitude: CompleteExampleSource JavaScript YUI().use('autocomplete',function(Y){ varacNode=Y.one('#ac-input'); acNode.plug(Y.Plugin.AutoComplete,{ //Highlightthefirstresultofthelist. activateFirstItem:true, //Thelistoftheresultscontainsupto10results. maxResults:10, //Todisplaythesuggestions,theminimumoftypedcharsisfive. minQueryLength:5, //Numberofmillisecondstowaitafteruserinputbeforetriggeringa //`query`event.Thisisusefultothrottlequeriestoaremotedata //source. queryDelay:500, //Handlingthelistofresultsismandatory,becausetheservicecanbe //unavailable,canreturnanerror,oneresult,oranarrayofresults. //However`resultListLocator`needstoalwaysreturnanarray. resultListLocator:function(response){ //Makessureanarrayisreturnedevenonanerror. if(response.error){ return[]; } varquery=response.query.results.json, addresses; if(query.status!=='OK'){ return[]; } //GrabtheactualaddressesfromtheYQLquery. addresses=query.results; //Makessureanarrayisalwaysreturned. returnaddresses.length>0?addresses:[addresses]; }, //Whenanitemisselected,thevalueofthefieldindicatedinthe //`resultTextLocator`isdisplayedintheinputfield. resultTextLocator:'formatted_address', //{query}placeholderisencoded,buttohandlethespacescorrectly, //thequeryishastobeencodedagain: // //"myaddress"->"my%2520address"//OK=>{request} //"myaddress"->"my%20address"//OK=>{query} requestTemplate:function(query){ returnencodeURI(query); }, //{request}placeholder,insteadofthe{query}one,thiswillinsert //the`requestTemplate`valueinsteadoftheraw`query`valuefor //caseswhereyouactuallywantadouble-encoded(orcustomized)query. source:'SELECT*FROMjsonWHERE'+ 'url="http://maps.googleapis.com/maps/api/geocode/json?'+ 'sensor=false&'+ 'address={request}"', //Automaticallyadjustthewidthofthedropdownlist. width:'auto' }); //Adjustthewidthoftheinputcontainer. acNode.ac.after('resultsChange',function(){ varnewWidth=this.get('boundingBox').get('offsetWidth'); acNode.setStyle('width',Math.max(newWidth,100)); }); //Fillthe`lat`and`lng`fieldswhentheuserselectsanitem. acNode.ac.on('select',function(e){ varlocation=e.result.raw.geometry.location; Y.one('#locationLat').set('text',location.lat); Y.one('#locationLng').set('text',location.lng); }); }); HTML Note:besuretoaddtheyui3-skin-samclassnametothe page's

elementortoaparentelementofthewidgetinordertoapply thedefaultCSSskin.SeeUnderstandingSkinning.

Enteranaddress:

• Latitude:
• Longitude:

Examples BasicLocalData RemoteDataviaJSONP RemoteDataviaYQL RemoteDataviaDataSource TagCompletionUsingQueryDelimiters FindPhotosonFlickr(CustomFormatting,YQLSource) FilteraSetofExistingItemsonaPage AddressCompletiononGoogle'sGeocodingService