location.tsx

import { Status, Wrapper } from '@googlemaps/react-wrapper';
import { useContext } from 'react';
import LocationContext from '../../context/locationContext';
import Address from '../AddressDetails';
import SearchBar from '../SearchBar';
import './location.css';

const Location = () => {
    const {
        latitude,
        setLatitude,
        longitude,
        setLongitude,
        addressDetails,
        setAddressDetails
    } = useContext(LocationContext);

    const render = (status: Status) => {
        return <h1>{status}</h1>
    }

    const center = { lat: latitude, lng: longitude };
    const zoom = 15;

    return (
        <div className='root'>
            <Wrapper
                apiKey='*** YOUR API KEY GOES HERE ***'
                libraries={['places']}
                render={render}>

                <p>Search Bar</p>
                <SearchBar
                    apiKey='*** YOUR API KEY GOES HERE ***'
                    onPlaceSelected={(selectedPlace: any) => {
                        console.log('selectedPlace: ', selectedPlace)
                        const lat = selectedPlace?.geometry.location.lat() || parseFloat(selectedPlace.name.split(',')[0].trim());
                        const lng = selectedPlace?.geometry.location.lng() || parseFloat(selectedPlace.name.split(',')[0].trim());
                        const geocoder = new google.maps.Geocoder();
                        const latlng = { lat, lng };

                        geocoder.geocode({ 'latLng': latlng }, (result, status) => {
                            if (status === google.maps.GeocoderStatus.OK) {
                                const placeData = result && result[0];
                                const addressDetails = placeData?.address_components;
                                setAddressDetails(addressDetails);
                            }
                        });
                        setLatitude(lat);
                        setLongitude(lng);
                    }}
                    options={{
                        componentRestrictions: { country: 'IN' }
                    }} />

                <div className='locationContainer'>
                    <div>
                        <p>Address details</p>
                        <Address address={addressDetails} />
                  </div>
                </div>
            </Wrapper>
        </div>
    )
}

export default Location;

marker.tsx

import { useContext, useEffect, useState } from "react";
import LocationContext from "../../context/locationContext";

const Marker = (props: any) => {
    const [popup, setPopup] = useState<any>();
    const {
        latitude,
        longitude,
        setLatitude,
        setLongitude,
        setAddressDetails,
        marker,
        setMarker
    } = useContext(LocationContext);

    useEffect(() => {
        if (!marker) {
            setMarker(new google.maps.Marker());
            setPopup(new google.maps.InfoWindow({
                content: 'Please Drag & Drop me!'
            }))

            handleDragMarker()
        }

        return () => {
            if (marker) marker.setMap(null)
        }
    }, [marker]);

    const handleDragMarker = (event?: any) => {
        if (event) {
            setLatitude(event.latLng.lat());
            setLongitude(event.latLng.lng());
        }

        setTimeout(() => {
            const geocoder = new google.maps.Geocoder();
            const latlng = {
                lat: event?.latLng.lat() ?? latitude,
                lng: event?.latLng.lng() ?? longitude
            }

            geocoder.geocode({ 'latLng': latlng }, (results, status) => {
                if (status === google.maps.GeocoderStatus.OK) {
                    const placeData = results && results[0];
                    const addressDetails = placeData?.address_components;
                    setAddressDetails(addressDetails);
                }
            })
        }, 500);
        props?.map?.setCenter(marker?.getPosition())
    }

    useEffect(() => {
        if (marker) {
            marker.setOptions(props);
            popup?.open({
                anchor: marker,
                shouldFocus: false
            });
            props?.map?.setCenter(marker?.getPosition());
            marker.addListener('dragend', (event) => handleDragMarker(event));
        }
    }, [marker, props])

    return null;
}

export default Marker;

searchBar.tsx

import useGoolePlacesAPI from "../../hooks/useGooglePlacesAPI";
import PropTypes from 'prop-types';
import { forwardRef } from "react";

const inputStyle = {
    input: {
        height: '3rem',
        fontSize: '24px'
    }
}

const SearchBar = (props: any) => {
    const {
        apiKey,
        onPlaceSelected,
        libraries,
        inputAutocompleteValue,
        options,
        googleMapScriptBaseUrl,
        refProp,
        language,
        ...rest
    } = props;

    const { ref } = useGoolePlacesAPI({
        ref: refProp,
        googleMapScriptBaseUrl,
        onPlaceSelected,
        apiKey,
        libraries,
        inputAutocompleteValue,
        options,
        language
    });

    return (
        <input
            id='autocomplete-text-box'
            style={inputStyle.input}
            placeholder="Search any location"
            ref={ref}
            {...rest} />
    );
}

SearchBar.propTypes = {
    apiKey: PropTypes.string,
    libraries: PropTypes.arrayOf(PropTypes.string),
    ref: PropTypes.oneOfType([
        PropTypes.func,
        PropTypes.shape({ current: PropTypes.any })
    ]),
    googlemapScriptBaseUrl: PropTypes.string,
    onPlaceSelected: PropTypes.func,
    inputAutocompleteValue: PropTypes.string,
    options: PropTypes.shape({
        componentRestrictions: PropTypes.object,
        bounds: PropTypes.object,
        location: PropTypes.object,
        offset: PropTypes.number,
        origin: PropTypes.object,
        radius: PropTypes.number,
        sessionToken: PropTypes.object,
        types: PropTypes.arrayOf(PropTypes.string)
    }),
    language: PropTypes.string
}

export default forwardRef((props, ref) => (
    <SearchBar {...props} refProp={ref} />
));