brinley / google-places-web

A react native wrapper around the Google Place Javascript web API

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Google Places Web

A promise-based wrapper for the Google Places JS SDK for Node (and React Native).

Installation

yarn add google-places-web;
npm i google-places-web -S

Importing

// ES6
import Places from "google-places-web";

// ES5
const Places = require("google-places-web").default; // instance of GooglePlaces Class;

// Setup
Places.apiKey = "<API_KEY>";
Places.debug = __DEV__; // boolean;
let partialAddress = "1600 Pennsylv";
const radius = 2000;
const language = "en";

// Search with default opts
Places.autocomplete({ input: partialAddress, radius, language })
  .then(results => {
    // results array of partial matches
  })
  .catch(e => console.log(e));
const whiteHousePlaceID = "ChIJGVtI4by3t4kRr51d_Qm_x58";

Places.details({ placeid: whiteHousePlaceID })
  .then(result => {
    // result object
  })
  .catch(e => console.log(e));

Full Example

Make sure you have the lib built with npm run build or yarn build. That should create your dist/ directory.

> npm run build
> PLACES_API_KEY=<your_key_here> node examples/places-example.js

Troubleshooting

Feel free to file issues as you see fit, and always looking for collaborators to help make this better.

Errors

  • Invalid API Key - The instance of the GooglePlaces object does not have a valid API key from Google. Make sure you are either using import Places from... or import {GooglePlaces} from.... GooglePlaces is the base class so you would need to make an instance of it first.
  • STATUS_MESSAGE - Google responds with HTTP 200 but JSON contains an "error". This is parsed from the Google API response, ex. ZERO_RESULTS
  • Missing required params: [<PARAM1>, <PARAM2>] - Required params PARAM1 & PARAM2 are undefined or null
  • No parameters provided - A method was called without passing a parameters object to the method, most likely passed null, undefined or nothing. ex. Places.autocomplete(); instead of Places.autcomplete({foo: 'barr});

Important Notes

Google states that you can use Place Autocomplete even without a map. If you do show a map, it must be a Google map. When you display predictions from the Place Autocomplete service without a map, you must include the Powered by Google logo.

About

A react native wrapper around the Google Place Javascript web API


Languages

Language:TypeScript 65.6%Language:JavaScript 34.4%