React Component to use google maps services into your react applications using a render prop.
You can download
react-google-maps-loader from the NPM registry via the
yarn add react-google-maps-loadernpm install react-google-maps-loader --save
If you don't use package manager and you want to include
react-google-maps-loader directly in your html, you could get it from the UNPKG CDN
You can also try the component's editable demo hands-on and install it from bit.dev.
Load Map Only
This renders when the map is ready, with no loading state.
const App =<ReactGoogleMapLoaderparams=key: YOUR_API_KEY // Define your api key herelibraries: "places,geometry" // To request multiple libraries, separate them with a commarender= googleMaps && <div>Google Maps is loaded !</div>/>
Show Loading State
You can show a custom loading state while the user is still online by using the error values.
[String] Network Error- if the user us offline.
[String] SDK Authentication Error- if there is a problem loading Google maps due to incorrect keys, going over quota or one of the errors listed in the Error Messages Documentation.
undefined- map loaded correctly.
const App =<ReactGoogleMapLoaderparams=key: YOUR_API_KEY // Define your api key herelibraries: "places,geometry" // To request multiple libraries, separate them with a commarender=googleMaps ?<div>/*Show a custom error if SDK Authentication Error. See N/B 2 below.*/error ? error : "Google Maps is loaded !"</div>:<div>/*Check for network error so loading state ends if user lost connection.*/error === "Network Error" ?<p>error</p>:<p>isLoading...</p></div>/>
The Google Maps API does not provide errors in the callback but logs them to the console. We grouped all Google Maps errors not related to network connectivity as
SDK Authentication Error. Check the console if you get this.
googleMapsalways loads as long as there is no
Network Errorand the previous state is not cached. So, handle
SDK Authentication Errors(See 1. above) in the
googleMapspart of the conditional rendering as shown in the code above.
See Demo page
- ⇄ Pull/Merge requests and ★ Stars are always welcome.
- For bugs and feature requests, please create an issue.
- Pull requests must be accompanied by passing automated tests (
See CONTRIBUTING.md guidelines
This project is licensed under the MIT License - see the LICENCE.md file for details