# react-google-location

> A simple react js package for google place suggestion,current location and coordinates

Latest version **1.2.2** (published 2018-07-31) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-google-location
pnpm add react-google-location
yarn add react-google-location
bun add react-google-location
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.2 |
| Published | 2018-07-31 |
| First published | 2018-07-04 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 142.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 18 |
| Author | anil sidhu |
| Maintainers | anilsidhu |
| Keywords | react google place, react js google coordinates, react js current location, react google auto suggestion, google suggestion react js , google location react, google coordinates react js  , react, google, place, autocomplete, current location |

## Links

- npm: https://www.npmjs.com/package/react-google-location
- Repository: https://github.com/anil-sidhu/google-location
- Issues: https://github.com/anil-sidhu/google-location/issues
- npm.io page: https://npm.io/package/react-google-location

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.2.2 (latest) — 2018-07-31
- 1.2.1 — 2018-07-16
- 1.1.8 — 2018-07-16
- 1.1.7 — 2018-07-06
- 1.1.6 — 2018-07-06
- 1.1.5 — 2018-07-06
- 1.0.5 — 2018-07-05
- 1.0.4 — 2018-07-05
- 1.0.3 — 2018-07-05
- 1.0.2 — 2018-07-05
- 1.0.1 — 2018-07-04
- 1.0.0 — 2018-07-04

## README

# react-google-location
A Simple package for get current location,get google place autocomplete,get coordinates of selected location in react

### Features
##### Current Location with coordinates
##### Google location and place autocomplete
##### Coordinates with selected google location
##### Location fiter by country 
##### Location result in all google supported language



## Getting Started
Install the library:

```` npm i react-google-location ````

## Import and use React google location
Import GoogleCompoent from module from package 

```javascript 

import { GoogleComponent } from 'react-google-location' 

//... 
import React, { Component } from 'react';



const API_KEY = API_KEY_FROM_GOOGLE  // how to get key - step are below

class HomeComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      place: null,
    };
  }

  render() {
    return (
      <div >
         <GoogleComponent
         
          apiKey={API_KEY}
          language={'en'}
          country={'country:in|country:us'}
          coordinates={true}
          locationBoxStyle={'custom-style'}
          locationListStyle={'custom-style-list'}
          onChange={(e) => { this.setState({ place: e }) }} />
      </div>

    )
  } 
}


export default HomeComponent;

````

### Props


| Name          | Required | Type     | Default value | Description                                                                                                                  |
|-----------------|----------|----------|---------------|------------------------------------------------------------------------------------------------------------------------------|
|   apiKey    | Yes     | string   |      null         | need to get from google place api and pass as string. if key is invalid or empty result be b not found                                                                 |
|   language    | optional     | string   |      en         | language will change the lanugae of search result it will support all lanugage which is suppored by google place api for help link is here  [Language suppored by google](https://developers.google.com/maps/faq#languagesupport)    |                                                     |
|   country    | optional     | object   |               | country prop will change the country where you want to search .you can add 5 country for filter.  |
|   coordinates    | optional     | boolean   |               | Coordinates props will return coordinates of selected place  |
|   locationBoxStyle    | optional     | string   |               | locationBoxStyle allow your to make custom style of search box   |
|   locationListStyle    | optional     | string   |               | locationListStyle allow your to make custom style of search list   |


### Use multiple languages

Pass key and value pair in the country object like this ```` country={in|country:pr|country:vi|country:gu|country:mp}  ````


### Get Api Key 

##### You need to enable key for google place as well google geocode also
click [here](https://developers.google.com/places/web-service/get-api-key)
click on the GET A KEY button 
now select a project or create new porject.
Click on the Next and your key is enabled. You can copy this is key and pass as a apikey :)

---
_Source: https://npm.io/package/react-google-location · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._