React Google Map Wrapper ·

react-google-map-wrapper is a React component library for rendering Google Maps.

You can see an example here.

import { Suspense } from 'react';
import { GoogleMap, GoogleMapApiLoader, Marker } from 'react-google-map-wrapper';

function Map() {
  return (
    <GoogleMap className='h-[400px]' zoom={17} center={{ lat: 37.5709413, lng: 126.977787 }}>
      <Marker lat={37.5709413} lng={126.977787} />
    </GoogleMap>
  );
}

function App() {
  return (
    <Suspense fallback={<Fallback />}>
      {/* Load the google map api */}
      <GoogleMapApiLoader apiKey='YOUR_API_KEY' suspense>
        <Map />
      </GoogleMapApiLoader>
    </Suspense>
  );
}

Installation

npm install react-google-map-wrapper # or yarn add react-google-map-wrapper or pnpm add react-google-map-wrapper

If you're using React v18, please install version 1.0.7.

Documentation

You can find the documentation on the website.

Check out the Getting Started page for a quick overview.

License

react-google-map-wrapper is MIT licensed.