https://github.com/techwithty/google-maps-two
Reusable Google Maps components and utils for React/Next.js (drawing tools, geometry helpers, advanced markers). Production-ready, typed, and composable.
https://github.com/techwithty/google-maps-two
components drawing geometry google-maps nextjs react typescript ui utils web
Last synced: 6 months ago
JSON representation
Reusable Google Maps components and utils for React/Next.js (drawing tools, geometry helpers, advanced markers). Production-ready, typed, and composable.
- Host: GitHub
- URL: https://github.com/techwithty/google-maps-two
- Owner: TechWithTy
- Created: 2025-08-21T14:57:55.000Z (6 months ago)
- Default Branch: master
- Last Pushed: 2025-08-21T17:37:56.000Z (6 months ago)
- Last Synced: 2025-08-21T18:31:11.195Z (6 months ago)
- Topics: components, drawing, geometry, google-maps, nextjs, react, typescript, ui, utils, web
- Language: TypeScript
- Homepage: https://www.cybershoptech.com
- Size: 16.6 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# google-maps-two (submodule)
Reusable Google Maps UI components and helpers for Next.js/React apps.
This package provides:
- Components: `MapWithDrawing`, `MapsTestComposite`
- Utils: bounds helpers for shapes and pin generation
Directory: `external/google-maps-two/`
## Features
- Load Google Maps JS API (with drawing, geometry, places, marker libs)
- Draggable primary marker synced with app state
- Drawing tools (polygon/rectangle/circle) with overlay UI
- Fit bounds on apply; generate simulated pins within shape
- Typed utils for shape bounds and point-in-shape checks
## Installation
Use it directly in this monorepo, or copy the folder into another project.
Peer deps expected in the host app (see versions in root package.json):
- react, react-dom
- next (optional, but components are client components)
- @react-google-maps/api
- @types/google.maps (dev)
## Environment variables
Provide a Google Maps API key and (optionally) a Map ID for vector maps.
Copy to your root `.env.local` (or similar):
```
# One of the two keys below is sufficient — choose your convention
NEXT_PUBLIC_GMAPS_KEY=""
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=""
# Optional: map styling id from Google Cloud console
NEXT_PUBLIC_GMAPS_MAP_ID=""
```
You can also use the `.env.example` in this folder as a reference.
## Usage
Import from the barrel export:
```tsx
"use client";
import { MapWithDrawing } from "@/external/google-maps-two/components";
export default function Example() {
const [center, setCenter] = useState({ lat: 39.7392, lng: -104.9903 });
const [pins, setPins] = useState([]);
return (
);
}
```
Or render the full demo page UI:
```tsx
import MapsTestPage from "@/app/maps-test/page"; // already re-exported
// or use directly
import { MapsTestComposite } from "@/external/google-maps-two/components";
```
## Exports
- Components: `@/external/google-maps-two/components`
- `MapWithDrawing`
- `MapsTestComposite`
- Utils: `@/external/google-maps-two/utils`
- `getBoundsFromShape`
- `isWithinCircle`
- `isWithinPolygon`
- `generatePinsWithinBounds`
## Notes
- Components assume TailwindCSS utility classes for styles, but work without Tailwind too.
- The composite uses your UI kit (`@/components/ui/*`) and `NestedMapDialog`; if extracting to a separate repo, either:
- Move those into this package, or
- Replace with your own UI/props.
## License
MIT