Hudoro input google maps

Package instalation

Instal package using pnpm

  pnpm add @hudoro/input-google-map

Instal package using yarn

  yarn add @hudoro/input-google-map

Instal package using npm

  npm i @hudoro/input-google-map

Usage/Examples

import React from "react";
import ReactDOM from "react-dom/client";
import {InputGoogleMaps,useGeocoder} from "@hudoro/input-google-map";

// also this package need to install @hudoro/text and @hudoro/input

const App = () => {
  const {geocode} = useGeocoder();

  const handleGeocode = async () => {
    const data = await geocode(-0.9160706000000001, 100.3523652);

    // the data contain :
    //     {
    //   viewport: google.maps.LatLngBounds;
    //   id: string;
    //   displayName: {
    //     text: string;
    //   };
    //   formattedAddress: string;
    //   location: google.maps.LatLng;
    // }
  };

  useEffect(() => {
    handleGeocode();
  }, []);

  return (
      <InputGoogleMaps lat={-0.9160706000000001} lng={100.3523652} />
  );
};


ReactDOM.createRoot(document.getElementById("app")!).render(<App />);

Props @hudoro/input-google-map

Props that you can pass to InputGoogleMaps

| Prop Name | Value | required | | :-------- | :----- | :------- | | lat | number | no | | lng | number | no | | apiKey | string | yes |