yarn add @bp/g-mapify

npm i @bp/g-mapify

    import  React from  'react';
    import { GMapify } from  'g-mapify';
    import  'g-mapify/dist/index.css';
    
    const  App = () => {
	    return (
		    <GMapify appKey="[google-map-key]" />
	    )
    }

import  React from  'react';
import { GMapify } from  '@bp/g-mapify';
import  '@bp/g-mapify/dist/index.css';

const  App = () => {
    const  onMapSelect = (status, data) => console.warn(status, data);
    
    return (
        <GMapify appKey="[google-map-key]" hasSearch onSelect={onMapSelect}/>
    )
}

import  React from  'react';
import { GMapify } from  '@bp/g-mapify';
import  '@bp/g-mapify/dist/index.css';

const  App = () => {

    const markers = [
        [28.4165425, 77.0437857, "Hello 1"],
        [28.415671, 77.0520993, `<div><h3>Southcity 2</h3> <img src="https://www.rentomojo.com/blog/wp-content/uploads/2019/07/shutterstock_1298400742.jpg" height="140"/> </div>`],
        [28.4175717, 77.05284840000002]
    ]

    const  onMapSelect = (status, data) => console.warn(status, data);
    
    return (
        <GMapify 
        appKey="[google-map-key]" 
        customMarkers={markers}
        autoCenter={false}
        onSelect={onMapSelect}/>
    )
}

    import  React from  'react';
    import { GMapify } from  '@bp/g-mapify';
    import  '@bp/g-mapify/dist/index.css';
    
    const  App = () => {
        const mapRef = useRef();

        const getLatLongByName = async () => {
            if (mapRef.current) {
                try {
                    const result = await mapRef.current.latLongFromQuery('BharatPe Office Delhi');
                    const lat = result[0]?.geometry.location.lat();
                    const lng = result[0]?.geometry.location.lng();
                } catch (e) {
                    // handle error
                }
            }
        };

	    return (
            <>
                <button onClick={getLatLongByName}>BharatPe Office Location</button>
                <GMapify ref={mapRef} appKey="[google-map-key]" />
            </>
	    )
    }

import { GMapify, AddressFormatter } from  '@bp/g-mapify'

const  onMapSelect = (status, data) => {
    if (status) {
        console.warn('Map Data', data);
        
        // get formatted address from google map address_components
        const  formattedAddress = AddressFormatter(data.address_components);
        console.warn('formated address', formattedAddress);
    }
};