Quick Start

• You need to set height of map, or else it won’t show up. (see the example below)
• If you want to access to the map instance, we recommend using useMapContext inside of GoogleMap component. (or you can just using ref)
• All components are uncontrolled. To render a controlled component, pass the props it needs to render and related event callback.
• react-google-map-wrapper doesn’t force components to always display by the data you pass. For example, if you drag a marker without passing a drag-related event callback to it, the actual position of the marker will be different from the position you passed(lat, lng). because you didn’t get the changed position in the event callback.
• Google Maps API doesn’t support SSR. Please use it only in client component.

---

If you’re looking for a complex example, please have a look at our examples.

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

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

function Map() {
  return (
    // you can pass props to map container element.
    // use Tailwind CSS or styled-components or anything to style your container.
    <GoogleMap className='h-[400px]' zoom={17} center={{ lat: 37.5709413, lng: 126.977787 }}>
      <Marker lat={37.5709413} lng={126.977787} />
    </GoogleMap>
  );
}

render(<App />, document.getElementById('root'));