ex-google-map-autocomplete

1.0.5 • Public • Published

ExGoogleMapAutoComplete



Table of Contents
  1. About The Project
  2. Getting Started
  3. Usage
  4. Contributing
  5. License
  6. Contact


About The Project

A React component that provides an autocomplete feature for Google Maps,
but also allows users to enter a custom address if it doesn't exist on Google Maps.


Logo

Suported Frameworks

  • React

Getting Started

  • Prerequisites

    • React Framework
    • Node JS

  • Installation

    You can install the ExGoogleMapAutoComplete package using package managers.
    nmp
npm install ex-google-map-autocomplete

Usage

To use the ExGoogleMapAutoComplete component in your React project, import it and include it in your JSX code:

import React from 'react';
import ExGoogleMapAutoComplete from 'ex-google-map-autocomplete';

function MyComponent() {
  const apiKey = "your_api_key"
  const [selectedPlace, setSelectedPlace] = useState({
    formatted_address: '',
    geometry: { location: { lat: null, lng: null } },
    useAutocomplete: true,
  })

  const handlePlaceSelect = place => {
    setSelectedPlace({
      formatted_address: place.formatted_address,
      geometry: place.geometry,
      useAutocomplete: selectedPlace.useAutocomplete,
    })
  }
  
  const handleUseAutocompleteChange = value => {
    setSelectedPlace({
      formatted_address: selectedPlace.formatted_address,
      geometry: selectedPlace.geometry,
      useAutocomplete: value,
    })
  }

  return (
    <div>
      <ExGoogleAutoComplete
        apiKey={apiKey}
        selectedPlace={selectedPlace}
        onPlaceSelect={handlePlaceSelect}
        useAutocomplete={selectedPlace.useAutocomplete}
        onUseAutoComplete={handleUseAutocompleteChange}
       />
    </div>
  );
}

export default MyComponent;

Props

The ExGoogleMapAutoComplete component accepts the following props:

  • apiKey : Your Google API Key

     const apiKey = "your_api_key"
  • selectedPlace : A use State variable used to storage the selected location.

    const [selectedPlace, setSelectedPlace] = useState({
     formatted_address: '',
     geometry: { location: { lat: null, lng: null } },
     useAutocomplete: true,
    })
  • onPlaceSelect: A callback function to perform the location storage, using the selectedPlace variable.

     const handlePlaceSelect = place => {
        setSelectedPlace({
           formatted_address: place.formatted_address,
           geometry: place.geometry,
           useAutocomplete: selectedPlace.useAutocomplete,
         })
       }
  • useAutocomplete: A component parameter used to set if the component will be using the Google Map Autocomplete feature or if is not.

  • onUseAutoComplete: A callback function to perform the behaviour change, using the selectedPlace variable

    const handleUseAutocompleteChange = value => {
     setSelectedPlace({
       formatted_address: selectedPlace.formatted_address,
       geometry: selectedPlace.geometry,
       useAutocomplete: value,
     })
    }

Feedback

If you have any feedback, please reach out to us at:


Contributing

Contributions are always welcome! 👏

We welcome contributions to this project! If you'd like to contribute, please follow these guidelines:

Thank you for your interest in contributing!


License

MIT


Support

For support, Star this repository and Follow me on GitHub

Package Sidebar

Install

npm i ex-google-map-autocomplete

Weekly Downloads

0

Version

1.0.5

License

MIT

Unpacked Size

74.2 kB

Total Files

11

Last publish

Collaborators

  • exagonsoft