Novice Pokémon Master

    react-google-maps-loader
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-google-maps-loader package

    4.3.0 • Public • Published

    react-google-maps-loader

    npm package Travis Codecov Module formats

    React Component to use google maps services into your react applications using a render prop.

    Getting started

    react-google-maps-loader

    You can download react-google-maps-loader from the NPM registry via the npm or yarn commands

    yarn add react-google-maps-loader
    npm 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

    https://unpkg.com/react-google-maps-loader/dist/react-google-maps-loader.min.js.

    You can also try the component's editable demo hands-on and install it from bit.dev.

    Usage

    Load Map Only

    This renders when the map is ready, with no loading state.

    import React from "react"
    import ReactGoogleMapLoader from "react-google-maps-loader"
     
    const App = () => (
        <ReactGoogleMapLoader
            params={{
                key: YOUR_API_KEY, // Define your api key here
                libraries: "places,geometry", // To request multiple libraries, separate them with a comma
            }}
            render={googleMaps => 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.

    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.

    import React from "react"
    import ReactGoogleMapLoader from "react-google-maps-loader"
     
    const App = () => (
        <ReactGoogleMapLoader
            params={{
                key: YOUR_API_KEY, // Define your api key here
                libraries: "places,geometry", // To request multiple libraries, separate them with a comma
            }}
            render={(googleMaps, error) =>
                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>
                )
            }
        />
    )

    N/B:

    1. 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.

    2. googleMaps always loads as long as there is no Network Error and the previous state is not cached. So, handle SDK Authentication Errors (See 1. above) in the googleMaps part of the conditional rendering as shown in the code above.

    Demo

    See Demo page

    Contributing

    • ⇄ 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 (npm test).

    See CONTRIBUTING.md guidelines

    Changelog

    See changelog

    License

    This project is licensed under the MIT License - see the LICENCE.md file for details

    Install

    npm i react-google-maps-loader

    DownloadsWeekly Downloads

    8,756

    Version

    4.3.0

    License

    MIT

    Unpacked Size

    94.6 kB

    Total Files

    11

    Last publish

    Collaborators

    • cedricdelpoux