Skip to content
master
Go to file
Code
This branch is 2 commits ahead, 60 commits behind cedricdelpoux:master.

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

React component to select geolocated suggestion from Google Maps Places API

Resources

License

Packages

No packages published
You can’t perform that action at this time.