{"id":13757277,"url":"https://github.com/hibiken/react-places-autocomplete","last_synced_at":"2025-05-15T16:07:19.391Z","repository":{"id":37451316,"uuid":"62973899","full_name":"hibiken/react-places-autocomplete","owner":"hibiken","description":"React component for Google Maps Places Autocomplete","archived":false,"fork":false,"pushed_at":"2023-12-27T10:03:05.000Z","size":2024,"stargazers_count":1378,"open_issues_count":127,"forks_count":388,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-04-29T18:44:01.078Z","etag":null,"topics":["autocomplete","component","geocoder","google-api","google-maps","react"],"latest_commit_sha":null,"homepage":"https://hibiken.github.io/react-places-autocomplete/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hibiken.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-07-09T23:55:51.000Z","updated_at":"2025-04-25T16:29:08.000Z","dependencies_parsed_at":"2024-01-12T18:39:35.721Z","dependency_job_id":"a6201bb5-12da-470c-9f5a-dc9f530af2c2","html_url":"https://github.com/hibiken/react-places-autocomplete","commit_stats":{"total_commits":244,"total_committers":20,"mean_commits":12.2,"dds":0.1885245901639344,"last_synced_commit":"242c0f5ea37e1fc19d761aae5efcc53d21db7f94"},"previous_names":["kenny-hibino/react-places-autocomplete"],"tags_count":44,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hibiken%2Freact-places-autocomplete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hibiken%2Freact-places-autocomplete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hibiken%2Freact-places-autocomplete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hibiken%2Freact-places-autocomplete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hibiken","download_url":"https://codeload.github.com/hibiken/react-places-autocomplete/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251843625,"owners_count":21652851,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["autocomplete","component","geocoder","google-api","google-maps","react"],"created_at":"2024-08-03T12:00:31.096Z","updated_at":"2025-05-15T16:07:19.364Z","avatar_url":"https://github.com/hibiken.png","language":"JavaScript","funding_links":[],"categories":["Utilities :wrench:","JavaScript"],"sub_categories":[],"readme":"[![MIT-License](https://img.shields.io/npm/l/react-places-autocomplete.svg?style=flat-square)]()\r\n[![Gitter](https://img.shields.io/gitter/room/nwjs/nw.js.svg?style=flat-square)](https://gitter.im/react-places-autocomplete/Lobby)\r\n[![Maintainers Wanted](https://img.shields.io/badge/maintainers-wanted-orange)](https://github.com/hibiken/react-places-autocomplete/issues/296#issuecomment-583764730)\r\n\r\n## We are looking for maintainers!\r\nIn order to ensure active development going forward, we are looking for maintainers to join the project. [Please contact the project owner if you are interested.](https://github.com/hibiken/react-places-autocomplete/issues/296#issuecomment-583764730)\r\n\r\n# React Places Autocomplete\r\n\r\n\r\n\r\nA React component to build a customized UI for Google Maps Places Autocomplete\r\n\r\n### Demo\r\n\r\nLive demo: [hibiken.github.io/react-places-autocomplete/](https://hibiken.github.io/react-places-autocomplete/)\r\n\r\n### Features\r\n\r\n1. Enable you to easily build a customized autocomplete dropdown powered by [Google Maps Places Library](https://developers.google.com/maps/documentation/javascript/places)\r\n2. [Utility functions](#utility-functions) to geocode and get latitude and longitude using [Google Maps Geocoder API](https://developers.google.com/maps/documentation/javascript/geocoding)\r\n3. Full control over rendering to integrate well with other libraries (e.g. Redux-Form)\r\n4. Mobile friendly UX\r\n5. WAI-ARIA compliant\r\n6. Support Asynchronous Google script loading\r\n\r\n### Installation\r\n\r\nTo install the stable version\r\n\r\n```sh\r\nnpm install --save react-places-autocomplete\r\n```\r\n\r\nReact component is exported as a default export\r\n\r\n```js\r\nimport PlacesAutocomplete from 'react-places-autocomplete';\r\n```\r\n\r\nutility functions are named exports\r\n\r\n```js\r\nimport {\r\n  geocodeByAddress,\r\n  geocodeByPlaceId,\r\n  getLatLng,\r\n} from 'react-places-autocomplete';\r\n```\r\n\r\n### Getting Started\r\n\r\n\u003ca name=\"load-google-library\"\u003e\u003c/a\u003e\r\nTo use this component, you are going to need to load [Google Maps JavaScript API](https://developers.google.com/maps/documentation/javascript/)\r\n\r\nLoad the library in your project\r\n\r\n```html\r\n\u003cscript src=\"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY\u0026libraries=places\"\u003e\u003c/script\u003e\r\n```\r\n\r\nCreate your component\r\n\r\n```js\r\nimport React from 'react';\r\nimport PlacesAutocomplete, {\r\n  geocodeByAddress,\r\n  getLatLng,\r\n} from 'react-places-autocomplete';\r\n\r\nclass LocationSearchInput extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = { address: '' };\r\n  }\r\n\r\n  handleChange = address =\u003e {\r\n    this.setState({ address });\r\n  };\r\n\r\n  handleSelect = address =\u003e {\r\n    geocodeByAddress(address)\r\n      .then(results =\u003e getLatLng(results[0]))\r\n      .then(latLng =\u003e console.log('Success', latLng))\r\n      .catch(error =\u003e console.error('Error', error));\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      \u003cPlacesAutocomplete\r\n        value={this.state.address}\r\n        onChange={this.handleChange}\r\n        onSelect={this.handleSelect}\r\n      \u003e\r\n        {({ getInputProps, suggestions, getSuggestionItemProps, loading }) =\u003e (\r\n          \u003cdiv\u003e\r\n            \u003cinput\r\n              {...getInputProps({\r\n                placeholder: 'Search Places ...',\r\n                className: 'location-search-input',\r\n              })}\r\n            /\u003e\r\n            \u003cdiv className=\"autocomplete-dropdown-container\"\u003e\r\n              {loading \u0026\u0026 \u003cdiv\u003eLoading...\u003c/div\u003e}\r\n              {suggestions.map(suggestion =\u003e {\r\n                const className = suggestion.active\r\n                  ? 'suggestion-item--active'\r\n                  : 'suggestion-item';\r\n                // inline style for demonstration purpose\r\n                const style = suggestion.active\r\n                  ? { backgroundColor: '#fafafa', cursor: 'pointer' }\r\n                  : { backgroundColor: '#ffffff', cursor: 'pointer' };\r\n                return (\r\n                  \u003cdiv\r\n                    {...getSuggestionItemProps(suggestion, {\r\n                      className,\r\n                      style,\r\n                    })}\r\n                  \u003e\r\n                    \u003cspan\u003e{suggestion.description}\u003c/span\u003e\r\n                  \u003c/div\u003e\r\n                );\r\n              })}\r\n            \u003c/div\u003e\r\n          \u003c/div\u003e\r\n        )}\r\n      \u003c/PlacesAutocomplete\u003e\r\n    );\r\n  }\r\n}\r\n```\r\n\r\n## Props\r\n\r\nPlacesAutocomplete is a [Controlled Component](https://facebook.github.io/react/docs/forms.html#controlled-components) with a [Render Prop](https://reactjs.org/docs/render-props.html). Therefore, you MUST pass at least `value` and `onChange` callback to the input element, and render function via `children`.\r\n\r\n| Prop                                                    |   Type   |      Required      | Description                                                                                      |\r\n| ------------------------------------------------------- | :------: | :----------------: | ------------------------------------------------------------------------------------------------ |\r\n| [`value`](#value)                                       |  string  | :white_check_mark: | `value` for the input element                                                                    |\r\n| [`onChange`](#onChange)                                 | function | :white_check_mark: | `onChange` function for the input element                                                        |\r\n| [`children`](#children)                                 | function | :white_check_mark: | Render function to specify the rendering                                                         |\r\n| [`onSelect`](#onSelect)                                 | function |                    | Event handler to handle user's select event                                                      |\r\n| [`onError`](#onError)                                   | function |                    | Error handler function that gets called when Google Maps API responds with an error              |\r\n| [`searchOptions`](#searchOptions)                       |  object  |                    | Options to Google Maps API (i.e. bounds, radius)                                                 |\r\n| [`debounce`](#debounce)                                 |  number  |                    | Number of milliseconds to delay before making a call to Google Maps API                          |\r\n| [`highlightFirstSuggestion`](#highlightFirstSuggestion) | boolean  |                    | If set to `true`, first list item in the dropdown will be automatically highlighted              |\r\n| [`shouldFetchSuggestions`](#shouldFetchSuggestions)     | boolean  |                    | Component will hit Google Maps API only if this flag is set `true`                               |\r\n| [`googleCallbackName`](#googleCallbackName)             |  string  |                    | You can provide a callback name to initialize `PlacesAutocomplete` after google script is loaded |\r\n\r\n\u003ca name=\"value\"\u003e\u003c/a\u003e\r\n\r\n### value\r\n\r\nType: `string`,\r\nRequired: `true`\r\n\r\n\u003ca name=\"onChange\"\u003e\u003c/a\u003e\r\n\r\n### onChange\r\n\r\nType: `function`,\r\nRequired: `true`\r\n\r\nTypically this event handler will update `value` state.\r\n\r\n```js\r\n\u003cPlacesAutocomplete\r\n  value={this.state.value}\r\n  onChange={value =\u003e this.setState({ value })}\r\n\u003e\r\n  {/* custom render function */}\r\n\u003c/PlacesAutocomplete\u003e\r\n```\r\n\r\n\u003ca name=\"children\"\u003e\u003c/a\u003e\r\n\r\n### children\r\n\r\nType: `function`\r\nRequired: `true`\r\n\r\nThis is where you render whatever you want to based on the state of `PlacesAutocomplete`.\r\nThe function will take an object with the following keys.\r\n\r\n* `getInputProps` : function\r\n* `getSuggestionItemProps` : function\r\n* `loading` : boolean\r\n* `suggestions` : array\r\n\r\nSimple example\r\n\r\n```js\r\nconst renderFunc = ({ getInputProps, getSuggestionItemProps, suggestions }) =\u003e (\r\n  \u003cdiv className=\"autocomplete-root\"\u003e\r\n    \u003cinput {...getInputProps()} /\u003e\r\n    \u003cdiv className=\"autocomplete-dropdown-container\"\u003e\r\n      {loading \u0026\u0026 \u003cdiv\u003eLoading...\u003c/div\u003e}\r\n      {suggestions.map(suggestion =\u003e (\r\n        \u003cdiv {...getSuggestionItemProps(suggestion)}\u003e\r\n          \u003cspan\u003e{suggestion.description}\u003c/span\u003e\r\n        \u003c/div\u003e\r\n      ))}\r\n    \u003c/div\u003e\r\n  \u003c/div\u003e\r\n);\r\n\r\n// In render function\r\n\u003cPlacesAutocomplete value={this.state.value} onChange={this.handleChange}\u003e\r\n  {renderFunc}\r\n\u003c/PlacesAutocomplete\u003e;\r\n```\r\n\r\n#### getInputProps\r\n\r\nThis function will return the props that you can spread over the `\u003cinput /\u003e` element.\r\nYou can optionally call the function with an object to pass other props to the input.\r\n\r\n```js\r\n// In render function\r\n\u003cinput {...getInputProps({ className: 'my-input', autoFocus: true })} /\u003e\r\n```\r\n\r\n#### getSuggestionItemProps\r\n\r\nThis function will return the props that you can spread over each suggestion item in your\r\nautocomplete dropdown. You MUST call it with `suggestion` object as an argument, and optionally pass an object to pass other props to the element.\r\n\r\n```js\r\n// Simple example\r\n\u003cdiv className=\"autocomplete-dropdown\"\u003e\r\n  {suggestions.map(suggestion =\u003e (\r\n    \u003cdiv {...getSuggestionItemProps(suggestion)}\u003e\r\n      {suggestion.description}\r\n    \u003c/div\u003e\r\n  ))}\r\n\u003c/div\u003e\r\n\r\n// Pass options as a second argument\r\n\u003cdiv className=\"autocomplete-dropdown\"\u003e\r\n  {suggestions.map(suggestion =\u003e {\r\n    const className = suggestion.active ? 'suggestion-item--active' : 'suggestion-item';\r\n    return (\r\n      \u003cdiv {...getSuggestionItemProps(suggestion, { className })}\u003e\r\n        {suggestion.description}\r\n      \u003c/div\u003e\r\n    );\r\n  })}\r\n\u003c/div\u003e\r\n```\r\n\r\n#### loading\r\n\r\nThis is a boolean flag indicating whether or not the request is pending, or has completed.\r\n\r\n#### suggestions\r\n\r\nThis is an array of suggestion objects each containing all the data from Google Maps API and other metadata.\r\n\r\nAn example of a suggestion object.\r\n\r\n```js\r\n{\r\n  active: false,\r\n  description: \"San Francisco, CA, USA\",\r\n  formattedSuggestion: { mainText: \"San Francisco\", secondaryText: \"CA, USA\" },\r\n  id: \"1b9ea3c094d3ac23c9a3afa8cd4d8a41f05de50a\",\r\n  index: 0,\r\n  matchedSubstrings: [ {length: 8, offset: 0} ],\r\n  placeId: \"ChIJIQBpAG2ahYAR_6128GcTUEo\",\r\n  terms: [\r\n    { offset: 0, value: \"San Francisco\" },\r\n    { offset: 15, value: \"CA\" },\r\n    { offset: 19, value: \"USA\" }\r\n  ],\r\n  types: [\"locality\", \"political\", \"geocode\"]\r\n}\r\n```\r\n\r\n\u003ca name=\"onSelect\"\u003e\u003c/a\u003e\r\n\r\n### onSelect\r\n\r\nType: `function`\r\nRequired: `false`,\r\nDefault: `null`\r\n\r\nYou can pass a function that gets called instead of `onChange` function when user\r\nhits the Enter key or clicks on a suggestion item.\r\n\r\nThe function takes three positional arguments. First argument is `address`, second is `placeId` and third is the entire `suggestion` object.\r\n\r\n```js\r\n// NOTE: `placeId` and `suggestion` are null when user hits Enter key with no suggestion item selected.\r\nconst handleSelect = (address: string, placeId: ?string, suggestion: ?object) =\u003e {\r\n  // Do something with address and placeId and suggestion\r\n}\r\n\r\n// Pass this function via onSelect prop.\r\n\u003cPlacesAutocomplete\r\n  value={this.state.value}\r\n  onChange={this.handleChange}\r\n  onSelect={this.handleSelect}\r\n\u003e\r\n  {/* Custom render function */}\r\n\u003c/PlacesAutocomplete\u003e\r\n```\r\n\r\n\u003ca name=\"onError\"\u003e\u003c/a\u003e\r\n\r\n### onError\r\n\r\nType: `function`\r\nRequired: `false`\r\n\r\nYou can pass `onError` prop to customize the behavior when [google.maps.places.PlacesServiceStatus](https://developers.google.com/maps/documentation/javascript/places#place_details_responses) is not `OK` (e.g., no predictions are found)\r\n\r\nFunction takes `status` (string) and `clearSuggestions` (function) as parameters\r\n\r\n```js\r\n// Log error status and clear dropdown when Google Maps API returns an error.\r\nconst onError = (status, clearSuggestions) =\u003e {\r\n  console.log('Google Maps API returned error with status: ', status)\r\n  clearSuggestions()\r\n}\r\n\r\n\u003cPlacesAutocomplete\r\n  value={this.state.value}\r\n  onChange={this.handleChange}\r\n  onError={onError}\r\n\u003e\r\n  {/* Custom render function */}\r\n\u003c/PlacesAutocomplete\u003e\r\n```\r\n\r\n\u003ca name=\"searchOptions\"\u003e\u003c/a\u003e\r\n\r\n### searchOptions\r\n\r\nType: `Object`\r\nRequired: `false`\r\nDefault: `{}`\r\n\r\nYou can fine-tune the settings passed to the AutocompleteService class with `searchOptions` prop.\r\nThis prop accepts an object following the same format as [google.maps.places.AutocompletionRequest](https://developers.google.com/maps/documentation/javascript/reference#AutocompletionRequest)\r\n(except for `input`, which comes from the value of the input field).\r\n\r\n```js\r\n// these options will bias the autocomplete predictions toward Sydney, Australia with a radius of 2000 meters,\r\n// and limit the results to addresses only\r\nconst searchOptions = {\r\n  location: new google.maps.LatLng(-34, 151),\r\n  radius: 2000,\r\n  types: ['address']\r\n}\r\n\r\n\u003cPlacesAutocomplete\r\n  value={this.state.value}\r\n  onChange={this.handleChange}\r\n  searchOptions={searchOptions}\r\n\u003e\r\n  {/* Custom render function */}\r\n\u003c/PlacesAutocomplete\u003e\r\n```\r\n\r\n\u003ca name=\"debounce\"\u003e\u003c/a\u003e\r\n\r\n### debounce\r\n\r\nType: `number`\r\nRequired: `false`\r\nDefault: `200`\r\n\r\nThe number of milliseconds to delay before making a call to Google Maps API.\r\n\r\n\u003ca name=\"highlightFirstSuggestion\"\u003e\u003c/a\u003e\r\n\r\n### highlightFirstSuggestion\r\n\r\nType: `boolean`\r\nRequired: `false`\r\nDefault: `false`\r\n\r\nIf set to `true`, first suggestion in the dropdown will be automatically set to be active.\r\n\r\n\u003ca name=\"shouldFetchSuggestions\"\u003e\u003c/a\u003e\r\n\r\n### shouldFetchSuggestions\r\n\r\nType: `boolean`\r\nRequired: `false`\r\nDefault: `true`\r\n\r\n```js\r\n// Only fetch suggestions when the input text is longer than 3 characters.\r\n\u003cPlacesAutocomplete\r\n  value={this.state.address}\r\n  onChange={this.handleChange}\r\n  shouldFetchSuggestions={this.state.address.length \u003e 3}\r\n\u003e\r\n  {/* custom render function */}\r\n\u003c/PlacesAutocomplete\u003e\r\n```\r\n\r\n\u003ca name=\"googleCallbackName\"\u003e\u003c/a\u003e\r\n\r\n### googleCallbackName\r\n\r\nType: `string`\r\nRequired: `false`\r\nDefault: `undefined`\r\n\r\nIf provided, component will initialize after the browser has finished downloading google script.\r\n\r\n**IMPORTANT**: To enable this async mode, you need to provide the same callback name to google script via `callback=[YOUR CALLBACK NAME]`.\r\n\r\nExample:\r\n\r\n```html\r\n\u003cscript async defer src=\"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY\u0026libraries=places\u0026callback=myCallbackFunc\"\u003e\u003c/script\u003e\r\n```\r\n\r\nThen, provide `googleCallbackName` prop to `PlacesAutocomplete`.\r\n\r\n```js\r\n\u003cPlacesAutocomplete\r\n  value={this.state.value}\r\n  onChange={this.handleChange}\r\n  googleCallbackName=\"myCallbackFunc\"\r\n\u003e\r\n  {/* custom render function */}\r\n\u003c/PlacesAutocomplete\u003e\r\n```\r\n\r\n**NOTE**: If there are more than one `PlacesAutocomplete` components rendered in the page,\r\nset up a callback function that calls a callback function for each component.\r\n\r\nExample:\r\n\r\n```html\r\n\u003cscript\u003e\r\nwindow.myCallbackFunc = function() {\r\n  window.initOne \u0026\u0026 window.initOne();\r\n  window.initTwo \u0026\u0026 window.initTwo();\r\n}\r\n\u003c/script\u003e\r\n\u003cscript async defer\r\nsrc=\"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY\u0026libraries=places\u0026callback=myCallbackFunc\"\u003e\u003c/script\u003e\r\n```\r\n\r\n```js\r\n\u003cPlacesAutocomplete\r\n  value={this.state.value}\r\n  onChange={this.handleChange}\r\n  googleCallbackName=\"initOne\"\r\n\u003e\r\n  {/* custom render function */}\r\n\u003c/PlacesAutocomplete\u003e\r\n\r\n\u003cPlacesAutocomplete\r\n  value={this.state.value}\r\n  onChange={this.handleChange}\r\n  googleCallbackName=\"initTwo\"\r\n\u003e\r\n  {/* custom render function */}\r\n\u003c/PlacesAutocomplete\u003e\r\n```\r\n\r\n\u003ca name=\"utility-functions\"\u003e\u003c/a\u003e\r\n\r\n## Utility Functions\r\n\r\n* [`geocodeByAddress`](#geocode-by-address)\r\n* [`geocodeByPlaceId`](#geocode-by-place-id)\r\n* [`getLatLng`](#get-lat-lng)\r\n\r\n\u003ca name=\"geocode-by-address\"\u003e\u003c/a\u003e\r\n\r\n### `geocodeByAddress` API\r\n\r\n```js\r\n/**\r\n * Returns a promise\r\n * @param {String} address\r\n * @return {Promise}\r\n */\r\ngeocodeByAddress(address);\r\n```\r\n\r\n#### address\r\n\r\nType: `String`,\r\nRequired: `true`\r\n\r\nString that gets passed to Google Maps [Geocoder](https://developers.google.com/maps/documentation/javascript/geocoding)\r\n\r\n```js\r\nimport { geocodeByAddress } from 'react-places-autocomplete';\r\n\r\n// `results` is an entire payload from Google API.\r\ngeocodeByAddress('Los Angeles, CA')\r\n  .then(results =\u003e console.log(results))\r\n  .catch(error =\u003e console.error(error));\r\n```\r\n\r\n\u003ca name=\"geocode-by-place-id\"\u003e\u003c/a\u003e\r\n\r\n### `geocodeByPlaceId` API\r\n\r\n```js\r\n/**\r\n * Returns a promise\r\n * @param {String} placeId\r\n * @return {Promise}\r\n */\r\ngeocodeByPlaceId(placeId);\r\n```\r\n\r\n#### placeId\r\n\r\nType: `String`,\r\nRequired: `true`\r\n\r\nString that gets passed to Google Maps [Geocoder](https://developers.google.com/maps/documentation/javascript/geocoding)\r\n\r\n```js\r\nimport { geocodeByPlaceId } from 'react-places-autocomplete';\r\n\r\n// `results` is an entire payload from Google API.\r\ngeocodeByPlaceId('ChIJE9on3F3HwoAR9AhGJW_fL-I')\r\n  .then(results =\u003e console.log(results))\r\n  .catch(error =\u003e console.error(error));\r\n```\r\n\r\n\u003ca name=\"get-lat-lng\"\u003e\u003c/a\u003e\r\n\r\n### `getLatLng` API\r\n\r\n```js\r\n/**\r\n * Returns a promise\r\n * @param {Object} result\r\n * @return {Promise}\r\n */\r\ngetLatLng(result);\r\n```\r\n\r\n#### result\r\n\r\nType: `Object`\r\nRequired: `true`\r\n\r\nOne of the element from `results` (returned from Google Maps Geocoder)\r\n\r\n```js\r\nimport { geocodeByAddress, getLatLng } from 'react-places-autocomplete';\r\n\r\ngeocodeByAddress('Tokyo, Japan')\r\n  .then(results =\u003e getLatLng(results[0]))\r\n  .then(({ lat, lng }) =\u003e\r\n    console.log('Successfully got latitude and longitude', { lat, lng })\r\n  );\r\n```\r\n\r\n### Discussion\r\n\r\nJoin us on [Gitter](https://gitter.im/react-places-autocomplete/Lobby) if you are interested in contributing!\r\n\r\n### License\r\n\r\nMIT\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhibiken%2Freact-places-autocomplete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhibiken%2Freact-places-autocomplete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhibiken%2Freact-places-autocomplete/lists"}