react-google-maps-loader

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

View demo Download Source

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.

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.

GitHub