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

| Prop | Type | Default | Description | | -------------------------- | --------------------------------------------- | ------------------------------------------------------ | ----------------------------------------------------------------------------- | | apiKey | string | null | Required. Google Maps API Key. | | onLocationSelect | (coords: Coords | null) => void | - | Required. Callback on location change(select/deselect). | | selectedLocation | Coords | null | null | Currently selected coordinatesto display on the map. | | defaultCenter | Coords | { lat: 15.3694, lng: 44.1910 } (Sana'a) | Initial map center if selectedLocationis not provided. | | defaultZoom | number | 12 | The initial zoom level of the map. | | height | string | "60vh" | Height of the map container(e.g., '500px', '70vh'). | | width | string | "100%" | Width of the map container(e.g., '100%', '600px'). | | defaultMapMode | 'dark' | 'light' | 'dark' | Sets the initial theme for the map. | | showModeToggle | boolean | true | Show/hide the dark/light modetoggle button. | | showFullscreenToggle | boolean | true | Show/hide the fullscreentoggle button. | | showLocationButton | boolean | true | Show/hide the "Get my currentlocation" button. | | showSaveCancel | boolean | false | Show/hide the Save and Cancel buttons. | | showCoordinatesDisplay | boolean | true | Show/hide the selected coordinatestext below the map. | | saveText | string | "Save Changes" | Text for the Save button. | | cancelText | string | "Cancel" | Text for the Cancel button. | | savingText | string | "Saving..." | Text for Save buttonwhile isSaving is true. | | onSave | () => void | - | Callback executed when Savebutton is clicked. | | onCancel | () => void | - | Callback executed when Cancelbutton is clicked. | | isSaving | boolean | false | If true, disables Save/Canceland shows savingText. | | modeToggleButtonColor | string | "#ffffff" | Text/Icon color for the modetoggle button. | | modeToggleButtonBg | string | "rgba(31, 41, 55, 0.8)" | Background color for the modetoggle button. | | saveButtonColor | string | "#ffffff" | Text color for the Save button. | | saveButtonBg | string | "#374151" | Background color for the Save button. | | cancelButtonColor | string | "#f3f4f6" | Text color for the Cancel button. | | cancelButtonBg | string | "#374151" | Background color for the Cancel button. | | fullscreenButtonColor | string | "#ffffff" | Text/Icon color for thefullscreen button. | | fullscreenButtonBg | string | "rgba(31, 41, 55, 0.8)" | Background color for thefullscreen button. | | locationButtonColor | string | "#ffffff" | Text/Icon color for thelocation button. | | locationButtonBg | string | "rgba(31, 41, 55, 0.8)" | Background color for thelocation button. | | containerClassName | string | "" | Custom CSS classes for themain map container div. | | modeToggleButtonClassName| string | "" | Custom CSS classes for themode toggle button. | | saveButtonClassName | string | "" | Custom CSS classes for the Save button. | | cancelButtonClassName | string | "" | Custom CSS classes for the Cancel button. | | fullscreenButtonClassName| string | "" | Custom CSS classes for thefullscreen button. | | locationButtonClassName | string | "" | Custom CSS classes for thelocation button. | | customLoadingIndicator | React.ReactNode | - | Replace default loading spinnerwith a custom component. | | customErrorDisplay | (error: string \| null) => React.ReactNode | - | Render custom componentwhen an error occurs. | | customModeToggle | React.ReactNode | - | Replace default mode togglewith a custom component. | | customFullscreenToggle | React.ReactNode | - | Replace default fullscreen buttonwith a custom component. | | customLocationButton | React.ReactNode | - | Replace default location buttonwith a custom component. | | customSaveButton | React.ReactNode | - | Replace default Save buttonwith a custom component. | | customCancelButton | React.ReactNode | - | Replace default Cancel buttonwith a custom component. | | customCoordinatesDisplay | (coords: Coords \| null) => React.ReactNode| - | Render custom componentto display selected coords. | | modeToggleStyle | CSSProperties | { position: 'absolute', top: '0.5rem', left: '0.5rem', zIndex: 10 } | Inline styles for the modetoggle button's position. | | saveButtonStyle | CSSProperties | { position: 'absolute', top: '0.5rem', right: '0.5rem', zIndex: 10 } | Inline styles for the Savebutton's position. | | cancelButtonStyle | CSSProperties | { position: 'absolute', top: '0.5rem', right: 'calc(0.5rem + 130px + 8px)', zIndex: 10 } | Inline styles for the Cancelbutton's position. | | locationButtonStyle | CSSProperties | { position: 'absolute', bottom: '3.5rem', right: '2rem', zIndex: 10 } | Inline styles for the locationbutton's position. | | fullscreenToggleStyle | CSSProperties | { position: 'absolute', bottom: '1rem', right: '2rem', zIndex: 10 } | Inline styles for the fullscreenbutton's position. |

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

GoogleMapPreview Props

| Prop | Type | Default | Description | | ------------------------- | ------------------------------------ | -------------- | --------------------------------------------------------------------------------- | | apiKey | string \| null | null | Required. Google Maps API Key.Displays error if missing. | | latitude | number \| string \| null | null | Latitude for the map preview center.Can be number or "-". | | longitude | number \| string \| null | null | Longitude for the map preview center.Can be number or "-". | | height | string | "150px" | Height of the preview container(e.g., '100px', '20vh'). | | width | string | "100%" | Width of the preview container(e.g., '100%', '300px'). | | zoom | number | 14 | Zoom level for the static mapimage (0-21). | | mapType | 'roadmap' \| 'satellite' \| 'hybrid' \| 'terrain' | 'roadmap' | Map tiles type for the preview image. | | containerClassName | string | "" | Custom CSS classes for the mainpreview container div. | | placeholderTextClassName| string | "" | Custom CSS classes for placeholder text(p tags) shown when key/coordsare missing. | | apiKeyMissingPlaceholder| React.ReactNode | - | Custom component/node to displaywhen the API key is missing. | | noCoordsPlaceholder | React.ReactNode | - | Custom component/node to displaywhen no coordinates are provided. |

License

ISC