# Google Maps JavaScript API React Wrapper [![npm](https://img.shields.io/npm/v/@googlemaps/react-wrapper)](https://www.npmjs.com/package/@googlemaps/react-wrapper) ![Build](https://github.com/googlemaps/react-wrapper/workflows/Test/badge.svg) ![Release](https://github.com/googlemaps/react-wrapper/workflows/Release/badge.svg) [![codecov](https://codecov.io/gh/googlemaps/react-wrapper/branch/master/graph/badge.svg)](https://codecov.io/gh/googlemaps/react-wrapper) ![GitHub contributors](https://img.shields.io/github/contributors/googlemaps/react-wrapper?color=green) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![](https://github.com/jpoehnelt/in-solidarity-bot/raw/main/static//badge-flat-square.png)](https://github.com/apps/in-solidarity) ## Description Wrap React components with this library to load the Google Maps JavaScript API. ```jsx import { Wrapper } from "@googlemaps/react-wrapper"; const MyApp = () => ( ); ``` The preceding example will not render any elements unless the Google Maps JavaScript API is successfully loaded. To handle error cases and the time until load is complete, it is recommended to provide render props. ```jsx import { Wrapper, Status } from "@googlemaps/react-wrapper"; const render = (status) => { switch (status) { case Status.LOADING: return ; case Status.FAILURE: return ; case Status.SUCCESS: return ; } }; const MyApp = () => ; ``` When combining children and render props, the children will render on success and the render prop will be executed for other status values. ```tsx import { Wrapper, Status } from "@googlemaps/react-wrapper"; const render = (status: Status): ReactElement => { if (status === Status.FAILURE) return ; return ; }; const MyApp = () => ( ); ``` ### @googlemaps/js-api-loader This wrapper uses [@googlemaps/js-api-loader][js_api_loader] to load the Google Maps JavaScript API. This library uses a singleton pattern and will not attempt to load the library more than once. All options accepted by [@googlemaps/js-api-loader][js_api_loader] are also accepted as props to the wrapper component. ### MyMapComponent The following snippets demonstrates the usage of `useRef` and `useEffect` hooks with Google Maps. ```tsx function MyMapComponent({ center, zoom, }: { center: google.maps.LatLngLiteral; zoom: number; }) { const ref = useRef(); useEffect(() => { new window.google.maps.Map(ref.current, { center, zoom, }); }); return

; } ``` ## Examples See the [examples](https://github.com/googlemaps/react-wrapper/tree/main/examples) folder for additional usage patterns. * [Basic Demo](https://googlemaps.github.io/react-wrapper/public/basic/) ## Install Available via npm as the package [@googlemaps/react-wrapper](https://www.npmjs.com/package/@googlemaps/react-wrapper). ```sh npm i @googlemaps/react-wrapper ``` or ```sh yarn add @googlemaps/react-wrapper ``` For TypeScript support additionally install type definitions. ```sh npm i -D @types/google.maps ``` or ```sh yarn add -D @types/google.maps ``` ## Documentation The reference documentation can be found at this [link](https://googlemaps.github.io/react-wrapper/index.html). ## Support This library is community supported. We're comfortable enough with the stability and features of the library that we want you to build real production applications on it. If you find a bug, or have a feature suggestion, please [log an issue][issues]. If you'd like to contribute, please read [How to Contribute][contrib]. [issues]: https://github.com/googlemaps/react-wrapper/issues [contrib]: https://github.com/googlemaps/react-wrapper/blob/master/CONTRIBUTING.md [js_api_loader]: https://www.npmjs.com/package/@googlemaps/js-api-loader

패키지	다운로드	Stars	크기	Issues	발행일	라이선스

@googlemaps/react-wrapper	147,958	381	35 kB	17	7ヶ月前	Apache-2.0