react-dom-maps v0.1.1

react-dom-maps

A React library for integrating Google Maps with customizable components and markers, inspired by react-native-maps. The library is named react-dom-maps to reflect its focus on web-based map rendering.

🚀 Quick Start

Install the package using your preferred package manager:

npm install react-dom-maps

# or install using pnpm
pnpm add react-dom-maps

Start building your React-based Google Maps application!

import { useGoogleMap, GoogleMap, createMarker } from 'react-dom-maps'

const Marker = createMarker(() => {
  return <div className="w-[20px] h-[20px] bg-red-500 rounded-full border-white border" />
})

const LAT_LNG_HK = {
  lat: 22.3193,
  lng: 114.1694,
}

function App() {
  const options = useMemo(
    () => ({
      loader: {
        /** ✨ Replace this with your own API key */
        apiKey: import.meta.env.VITE_GOOGLE_MAP_API_KEY,
      },
      map: {
        mapTypeId: 'roadmap',
        center: LAT_LNG_HK,
      },
    }),
    [],
  )

  const { api, ref } = useGoogleMap(options)

  return (
    <GoogleMap className="w-full h-[600px] relative" api={api} containerRef={ref}>
      <Marker {...LAT_LNG_HK} origin="bottomCenter" />
    </GoogleMap>
  )
}

📚 Documentation

For detailed documentation, visit 👉🏻 react-dom-maps Docs