rc-geo-helper

rc-geo-helper is a versatile React component for Google Maps that includes address autocomplete and allows easy integration into your React applications. This component supports custom styles, dynamic libraries, zoom levels, and provides callback functions for selected place data.

Installation

You can easily install rc-geo-helper via your packeage manager.

npm install rc-geo-helper
yarn add rc-geo-helper

Usage

import React, { useState } from "react";
import { RcGeoHelper } from "my-map-component";

const App = () => {
  const handlePlaceSelected = (place) => {
    console.log("Selected place:", place);
  };

  return (
    <div className="App">
      <RcGeoHelper
        apiKey="YOUR_GOOGLE_MAPS_API_KEY"
        mapContainerStyle={{ width: "100%", height: "400px" }}
        className="my-map"
        libraries={["places"]}
        zoom={12}
        onChange={onChange}
        onPlaceSelected={handlePlaceSelected}
        location=""
      />
    </div>
  );
};

export default App;

Features

Dynamic Props : Customize map container styles, classes, libraries, and zoom levels.. Address Autocomplete: Automatically suggest and select locations based on user input.. Callback for Selected Place: Receive detailed place information through a callback function. Flexible Integration: Seamlessly integrate into React applications for enhanced map functionality.

Props

address: (string) The address to be geocoded and displayed on the map. apiKey: (string) Your Google Maps API key. mapContainerStyle: (object) CSS styles for the map container. className: (string) CSS class for the map container. libraries: (array) Google Maps libraries to load (default: ['places']). zoom: (number) Initial zoom level of the map (default: 10). onPlaceSelected: (function) Callback function to handle the selected place data.