@taida-dream/map-picker v1.0.22

React Google Map Location

A highly customizable React component library for Google Maps location selection and preview, featuring dark/light mode support, fullscreen capabilities, and seamless Tailwind CSS integration. Built with TypeScript for robust type safety and modern development practices.

Installation

npm install @taida-dream/map-picker
# or
yarn add @taida-dream/map-picker

Usage

import React, { useState } from 'react';
import { GoogleMapSelector, GoogleMapPreview } from '@taida-dream/map-picker';


function App() {
  const [selectedCoords, setSelectedCoords] = useState<{ lat: number; lng: number } | null>(null);

  return (
    <div>
      <h2>Map Selector</h2>
      <GoogleMapSelector
        apiKey="YOUR_GOOGLE_MAPS_API_KEY"
        onLocationSelect={setSelectedCoords}
        selectedLocation={selectedCoords}
        // Example customization:
        // showSaveCancel={true}
        // saveText="Confirm Location"
        // defaultMapMode="light"
      />

      <h2>Preview</h2>
      <GoogleMapPreview
        apiKey="YOUR_GOOGLE_MAPS_API_KEY"
        latitude={selectedCoords?.lat}
        longitude={selectedCoords?.lng}
        // Example customization:
        // height="200px"
        // mapType="satellite"
      />

      {selectedCoords && (
        <p>
          Selected: Lat {selectedCoords.lat.toFixed(6)}, Lng {selectedCoords.lng.toFixed(6)}
        </p>
      )}
    </div>
  );
}

export default App;

API

GoogleMapSelector Props

Note on Coords type: { lat: number; lng: number }

GoogleMapPreview Props

License

ISC