React component to select geolocated suggestion from Google Maps Places API
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 2 commits ahead, 13 commits behind xuopled:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
screenshots
src
.babelrc
.editorconfig
.eslintrc
.gitignore
CHANGELOG.md
LICENCE
README.md
package.json

README.md

react-google-places-suggest npm license

React component to select geolocated suggestion from Google Maps Places API

react-google-places-suggest example

Install

npm install --save react-google-places-suggest

Changelog

See changelog

Usage

import React, {Component} from "react"
import GoogleMapLoader from "react-google-maps-loader"
import GooglePlacesSuggest from "react-google-places-suggest"
import "react-google-places-suggest/lib/index.css"

const MY_API_KEY = "AIzaSyDwsdjfskhdbfjsdjbfksiTgnoriOAoUOgsUqOs10J0" // fake

export default class MyGoogleSuggest extends Component {
  state = {
    search: "",
    selectedCoordinate: null,
  }

  handleSearchChange = (e) => {
    this.setState({search: e.target.value})
  }

  handleSelectSuggest = (suggest, coordinate) => {
    this.setState({search: suggest.description, selectedCoordinate: coordinate})
  }

  render() {
    const {search} = this.state
    const {googleMaps} = this.props

    return (
      <GooglePlacesSuggest
        googleMaps={googleMaps}
        onSelectSuggest={this.handleSelectSuggest}
        search={search}
      >
        <input
          type="text"
          value={search }
          placeholder="Search a location"
          onChange={this.handleSearchChange}
        />
      </GooglePlacesSuggest>
    )
  }
}

export default GoogleMapLoader(MyGoogleSuggest, {
  libraries: ["places"],
  key: MY_API_KEY,
})

Props

  • googleMaps: Object - injected by GoogleMapLoader,
  • onSelectSuggest: Function with two parameters (onSelectSuggest: (suggest, coordinate) => {}),
  • renderSuggest: Function with one parameter (renderSuggest: (suggest) => {}),
  • search: String - the search query,
  • suggestRadius: Number - default 20,
  • suggestTypes: String Array - default [] - accepts string values as defined by Google API docs,
  • suggestComponentRestrictions: Object - default { country: "" } - accepts values defined by Google API docs,
  • textNoResults: String - default "No results" - null to disable,

Development

Clean lib folder

npm run clean

Build lib folder

npm run build

Build dist folder

npm run dist

Watch src folder

npm run watch

Lint src folder

npm run lint

License

See MIT