eeft-plugin-googleplaces

<!DOCTYPE html> <html> <head> <title>GooglePlaces</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <ul class="sections"> <li id="section-1"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-1">¶</a> </div> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">import</span> isFunction <span class="hljs-keyword">from</span> <span class="hljs-string">"lodash/isFunction"</span>;</pre></div></div> </li> <li id="section-2"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-2">¶</a> </div> <h1 id="googleplaces">GooglePlaces</h1> <p>Wraps the (non-UI) methods of the Google Places SDK to Javascript.</p> </div> <div class="content"><div class='highlight'><pre><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">GooglePlaces</span> </span>{</pre></div></div> </li> <li id="section-3"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-3">¶</a> </div> <h2 id="currentplace">currentPlace</h2> <p><code>currentPlace</code>(<code>sucess</code>, <code>failure</code>)</p> <p>Discover the place where the device is currently located.</p> <h3 id="important-notice">Important notice</h3> <p>This method <em>requires</em> that the user has enabled geolocation in the app. To to so, use the <a href="https://github.com/apache/cordova-plugin-geolocation">dedicated cordova plugin</a> before calling this method.</p> <h3 id="parameters">Parameters</h3> <ul> <li><code>success</code> is called in case of success, it will contain “place likehood” objects with a <code>place</code> and <code>likehood</code> fields:<pre><code class="lang-javascript">{ <span class="hljs-attr">place</span>: { <span class="hljs-attr">name</span>: <span class="hljs-string">"some place name"</span>, <span class="hljs-attr">placeID</span>: <span class="hljs-string">"XXXXX"</span> }, <span class="hljs-attr">likehood</span>: <span class="hljs-number">0.87</span> <span class="hljs-comment">// <= means 87% accurate</span> } </code></pre> </li> <li><code>failure</code> is called in case of an error, with an error objects</li> </ul> </div> <div class="content"><div class='highlight'><pre> currentPlace(success, failure) { cordova.exec( success, err => failure(<span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(err)), <span class="hljs-string">"GooglePlaces"</span>, <span class="hljs-string">"currentPlace"</span>, [], ); }</pre></div></div> </li> <li id="section-4"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-4">¶</a> </div> <h2 id="autocompletequery">autocompleteQuery</h2> <p><code>autocompleteQuery</code>(<code>query</code>, <code>[bounds]</code>, <code>[filter]</code>, <code>success</code>, <code>[failure]</code>)</p> <p>Runs a query to offer auto-completion results from a query.</p> <h4 id="note">Note</h4> <p>this method takes a <em>variable</em> number of arguments.</p> <h3 id="parameters">Parameters</h3> <ul> <li><code>query</code>: the actual query: an incomplete address.</li> <li><p><code>bounds</code>: a region to limit the search to.</p> <p> It should be defined as a “coordinate region” object such as:</p> <pre><code class="lang-javascript"> { <span class="hljs-attr">northEast</span>: { <span class="hljs-attr">latitude</span>: <span class="hljs-number">1.234</span>, <span class="hljs-attr">longitude</span>: <span class="hljs-number">5</span>,<span class="hljs-number">667</span> }, <span class="hljs-attr">southWest</span>: { <span class="hljs-attr">latitude</span>: <span class="hljs-number">1.234</span>, <span class="hljs-attr">longitude</span>: <span class="hljs-number">5</span>,<span class="hljs-number">667</span> } } </code></pre> </li> <li><p><code>filter</code>: a filter to limit the results to a specific region.</p> <p>Such a filter is given by a filter type taken from the <code>GooglePlaces.AutocompleteFilterTypes</code> and an (optional) country:</p> <pre><code class="lang-javascript">{ <span class="hljs-attr">filter</span>: AutocompleteFilterTypes.NoFilter, <span class="hljs-attr">country</span>: <span class="hljs-string">"FR"</span> <span class="hljs-comment">// <= this is optional</span> } </code></pre> </li> <li><p><code>success</code> is called in case of success, it will contain “autocomplete prediction” objects with info fields:</p> <pre><code class="lang-javascript">{ <span class="hljs-attr">fullText</span>: <span class="hljs-string">"description of the place"</span>, <span class="hljs-attr">primaryText</span>: <span class="hljs-string">"partial description of the place"</span>, <span class="hljs-attr">secondaryText</span>: <span class="hljs-string">"partial description of the place"</span>, <span class="hljs-attr">placeID</span>: <span class="hljs-string">"XXXXX"</span>, <span class="hljs-attr">types</span>: [ <span class="hljs-string">"a"</span>, <span class="hljs-string">"list"</span>, <span class="hljs-string">"of"</span>, <span class="hljs-string">"types"</span>, <span class="hljs-string">"for"</span>, <span class="hljs-string">"the"</span>, <span class="hljs-string">"result"</span> ] } </code></pre> </li> <li><code>failure</code> is called in case of an error, with an error object.</li> </ul> </div> <div class="content"><div class='highlight'><pre> autocompleteQuery(...args) { <span class="hljs-keyword">let</span> params = []; <span class="hljs-keyword">let</span> callbacks = []; <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> arg <span class="hljs-keyword">of</span> args) { <span class="hljs-keyword">if</span> (isFunction(arg)) { callbacks.push(arg); } <span class="hljs-keyword">else</span> { params.push(arg); } } <span class="hljs-keyword">let</span> success = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {}; <span class="hljs-keyword">let</span> failure = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {}; <span class="hljs-keyword">if</span> (callbacks.length > <span class="hljs-number">0</span>) { success = callbacks[<span class="hljs-number">0</span>]; <span class="hljs-keyword">if</span> (callbacks.length > <span class="hljs-number">1</span>) { failure = <span class="hljs-function"><span class="hljs-params">err</span> =></span> callbacks[<span class="hljs-number">1</span>](<span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(err)); } } <span class="hljs-keyword">if</span> (params.length > <span class="hljs-number">3</span> || callbacks.length > <span class="hljs-number">2</span>) { <span class="hljs-keyword">const</span> err = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>( <span class="hljs-string">"GooglePlaces: wrong arguments for autocompleteQuery(query, bounds, filter, success, failure)"</span>, ); failure(err); <span class="hljs-keyword">return</span>; } cordova.exec(success, failure, <span class="hljs-string">"GooglePlaces"</span>, <span class="hljs-string">"autocompleteQuery"</span>, params); }</pre></div></div> </li> <li id="section-5"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-5">¶</a> </div> <h2 id="showplaceautocomplete">showPlaceAutocomplete</h2> <p><code>showPlaceAutocomplete</code>(<code>sucess</code>, <code>failure</code>)</p> <p>Show the native UI for Picking a nearby place</p> <h3 id="important-notice">Important notice</h3> <p>This method <em>requires</em> that the user has enabled geolocation in the app. To to so, use the <a href="https://github.com/apache/cordova-plugin-geolocation">dedicated cordova plugin</a> before calling this method.</p> <h3 id="parameters">Parameters</h3> <ul> <li><p><code>bounds</code>: (optinal) a region to limit the search to.</p> <p> It should be defined as a “coordinate region” object such as:</p> <pre><code class="lang-javascript"> { <span class="hljs-attr">northEast</span>: { <span class="hljs-attr">latitude</span>: <span class="hljs-number">1.234</span>, <span class="hljs-attr">longitude</span>: <span class="hljs-number">5</span>,<span class="hljs-number">667</span> }, <span class="hljs-attr">southWest</span>: { <span class="hljs-attr">latitude</span>: <span class="hljs-number">1.234</span>, <span class="hljs-attr">longitude</span>: <span class="hljs-number">5</span>,<span class="hljs-number">667</span> } } </code></pre> </li> <li><p><code>success</code> is called in case of success, it will contain “place” objects with a <code>place</code> and <code>likehood</code> fields:</p> <pre><code class="lang-javascript">{ <span class="hljs-attr">name</span>: <span class="hljs-string">"some place name"</span>, <span class="hljs-attr">placeID</span>: <span class="hljs-string">"XXXXX"</span>, <span class="hljs-comment">// and lots of other fields, depending on the place info available</span> } </code></pre> </li> <li><code>failure</code> is called in case of an error, with an error objects</li> </ul> </div> <div class="content"><div class='highlight'><pre> pickPlace(...args) { <span class="hljs-keyword">let</span> params = []; <span class="hljs-keyword">let</span> callbacks = []; <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> arg <span class="hljs-keyword">of</span> args) { <span class="hljs-keyword">if</span> (isFunction(arg)) { callbacks.push(arg); } <span class="hljs-keyword">else</span> { params.push(arg); } } <span class="hljs-keyword">let</span> success = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {}; <span class="hljs-keyword">let</span> failure = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {}; <span class="hljs-keyword">if</span> (callbacks.length > <span class="hljs-number">0</span>) { success = callbacks[<span class="hljs-number">0</span>]; <span class="hljs-keyword">if</span> (callbacks.length > <span class="hljs-number">1</span>) { failure = <span class="hljs-function"><span class="hljs-params">err</span> =></span> callbacks[<span class="hljs-number">1</span>](<span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(err)); } } <span class="hljs-keyword">if</span> (params.length > <span class="hljs-number">1</span> || callbacks.length > <span class="hljs-number">2</span>) { <span class="hljs-keyword">const</span> err = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>( <span class="hljs-string">"GooglePlaces: wrong arguments for pickPlace(bounds, success, failure)"</span>, ); failure(err); <span class="hljs-keyword">return</span>; } cordova.exec(success, failure, <span class="hljs-string">"GooglePlaces"</span>, <span class="hljs-string">"pickPlace"</span>, []); }</pre></div></div> </li> <li id="section-6"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-6">¶</a> </div> <h2 id="showplaceautocomplete">showPlaceAutocomplete</h2> <p><code>showPlaceAutocomplete</code>(<code>sucess</code>, <code>failure</code>)</p> <p>Show the native UI for Place Autocomplete</p> <h3 id="parameters">Parameters</h3> <ul> <li><code>success</code> is called in case of success, it will contain “place” objects with a <code>place</code> and <code>likehood</code> fields:<pre><code class="lang-javascript">{ <span class="hljs-attr">name</span>: <span class="hljs-string">"some place name"</span>, <span class="hljs-attr">placeID</span>: <span class="hljs-string">"XXXXX"</span>, <span class="hljs-comment">// and lots of other fields, depending on the place info available</span> } </code></pre> </li> <li><code>failure</code> is called in case of an error, with an error objects</li> </ul> </div> <div class="content"><div class='highlight'><pre> showPlaceAutocomplete(success, failure) { cordova.exec( success, err => failure(<span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(err)), <span class="hljs-string">"GooglePlaces"</span>, <span class="hljs-string">"showPlaceAutocomplete"</span>, [], ); } }</pre></div></div> </li> <li id="section-7"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-7">¶</a> </div> <h2 id="filters-for-the-autocompletequery-method-">Filters for the <code>autocompleteQuery</code> method.</h2> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> AutocompleteFilterTypes = {</pre></div></div> </li> <li id="section-8"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-8">¶</a> </div> <ul> <li><code>AutocompleteFilterTypes.NoFilter</code> is an empty filter; all results are returned.</li> </ul> </div> <div class="content"><div class='highlight'><pre> NoFilter: <span class="hljs-string">"no_filter"</span>,</pre></div></div> </li> <li id="section-9"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-9">¶</a> </div> <ul> <li><code>AutocompleteFilterTypes.Geocode</code> returns only autocomplete results with a precise address. Use this type when you know the user is looking for a fully specified address.</li> </ul> </div> <div class="content"><div class='highlight'><pre> Geocode: <span class="hljs-string">"geocode"</span>,</pre></div></div> </li> <li id="section-10"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-10">¶</a> </div> <ul> <li><code>AutocompleteFilterTypes.Address</code> returns only places that are businesses.</li> </ul> </div> <div class="content"><div class='highlight'><pre> Address: <span class="hljs-string">"address"</span>,</pre></div></div> </li> <li id="section-11"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-11">¶</a> </div> <ul> <li><code>AutocompleteFilterTypes.Establishment</code> returns only places that are businesses.</li> </ul> </div> <div class="content"><div class='highlight'><pre> Establishment: <span class="hljs-string">"establishment"</span>,</pre></div></div> </li> <li id="section-12"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-12">¶</a> </div> <ul> <li><code>AutocompleteFilterTypes.Region</code> returns only places that match one of the following types: <code>locality</code>, <code>sublocality</code>, <code>postal_code</code>, <code>country</code>, <code>administrative_area_level_1</code>, <code>administrative_area_level_2</code></li> </ul> </div> <div class="content"><div class='highlight'><pre> Region: <span class="hljs-string">"region"</span>,</pre></div></div> </li> <li id="section-13"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-13">¶</a> </div> <ul> <li><code>AutocompleteFilterTypes.City</code> returns only results matching <code>locality</code> or <code>administrative_area_level_3</code>.</li> </ul> </div> <div class="content"><div class='highlight'><pre> City: <span class="hljs-string">"city"</span>, }; <span class="hljs-built_in">module</span>.exports = <span class="hljs-keyword">new</span> GooglePlaces(); <span class="hljs-built_in">module</span>.exports.AutocompleteFilterTypes = AutocompleteFilterTypes;</pre></div></div> </li> </ul> </div> </body> </html>