@taida-dream/map-picker

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`	-
selectedLocation	`Coords	null`	null
defaultCenter	Coords	{ lat: 15.3694, lng: 44.1910 } (Sana'a)	Initial map center if selectedLocation is 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'
showModeToggle	boolean	true	Show/hide the dark/light mode toggle button.
showFullscreenToggle	boolean	true	Show/hide the fullscreen toggle button.
showLocationButton	boolean	true	Show/hide the "Get my current location" button.
showSaveCancel	boolean	false	Show/hide the Save and Cancel buttons.
showCoordinatesDisplay	boolean	true	Show/hide the selected coordinates text 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 button while isSaving is true.
onSave	() => void	-	Callback executed when Save button is clicked.
onCancel	() => void	-	Callback executed when Cancel button is clicked.
isSaving	boolean	false	If true, disables Save/Cancel and shows savingText.
modeToggleButtonColor	string	"#ffffff"	Text/Icon color for the mode toggle button.
modeToggleButtonBg	string	"rgba(31, 41, 55, 0.8)"	Background color for the mode toggle 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 the fullscreen button.
fullscreenButtonBg	string	"rgba(31, 41, 55, 0.8)"	Background color for the fullscreen button.
locationButtonColor	string	"#ffffff"	Text/Icon color for the location button.
locationButtonBg	string	"rgba(31, 41, 55, 0.8)"	Background color for the location button.
containerClassName	string	""	Custom CSS classes for the main map container div.
modeToggleButtonClassName	string	""	Custom CSS classes for the mode 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 the fullscreen button.
locationButtonClassName	string	""	Custom CSS classes for the location button.
customLoadingIndicator	React.ReactNode	-	Replace default loading spinner with a custom component.
customErrorDisplay	(error: string | null) => React.ReactNode	-	Render custom component when an error occurs.
customModeToggle	React.ReactNode	-	Replace default mode toggle with a custom component.
customFullscreenToggle	React.ReactNode	-	Replace default fullscreen button with a custom component.
customLocationButton	React.ReactNode	-	Replace default location button with a custom component.
customSaveButton	React.ReactNode	-	Replace default Save button with a custom component.
customCancelButton	React.ReactNode	-	Replace default Cancel button with a custom component.
customCoordinatesDisplay	(coords: Coords | null) => React.ReactNode	-	Render custom component to display selected coords.
modeToggleStyle	CSSProperties	{ position: 'absolute', top: '0.5rem', left: '0.5rem', zIndex: 10 }	Inline styles for the mode toggle button's position.
saveButtonStyle	CSSProperties	{ position: 'absolute', top: '0.5rem', right: '0.5rem', zIndex: 10 }	Inline styles for the Save button's position.
cancelButtonStyle	CSSProperties	{ position: 'absolute', top: '0.5rem', right: 'calc(0.5rem + 130px + 8px)', zIndex: 10 }	Inline styles for the Cancel button's position.
locationButtonStyle	CSSProperties	{ position: 'absolute', bottom: '3.5rem', right: '2rem', zIndex: 10 }	Inline styles for the location button's position.
fullscreenToggleStyle	CSSProperties	{ position: 'absolute', bottom: '1rem', right: '2rem', zIndex: 10 }	Inline styles for the fullscreen button'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 map image (0-21).
mapType	'roadmap' | 'satellite' | 'hybrid' | 'terrain'	'roadmap'	Map tiles type for the preview image.
containerClassName	string	""	Custom CSS classes for the main preview container div.
placeholderTextClassName	string	""	Custom CSS classes for placeholder text (p tags) shown when key/coords are missing.
apiKeyMissingPlaceholder	React.ReactNode	-	Custom component/node to display when the API key is missing.
noCoordsPlaceholder	React.ReactNode	-	Custom component/node to display when no coordinates are provided.

License

ISC