How to add the Google Maps API key for a React app created with create-react-app using react-google-maps?

Question

I'm trying to use the example component given in Step 5 of https://tomchentw.github.io/react-google-maps/#introduction,

import React from "react"
import { compose, withProps } from "recompose"
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps"

const MyMapComponent = compose(
  withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  withScriptjs,
  withGoogleMap
)((props) =>
  <GoogleMap
    defaultZoom={8}
    defaultCenter={{ lat: -34.397, lng: 150.644 }}
  >
    {props.isMarkerShown && <Marker position={{ lat: -34.397, lng: 150.644 }} onClick={props.onMarkerClick} />}
  </GoogleMap>
))

class MyFancyComponent extends React.PureComponent {
  state = {
    isMarkerShown: false,
  }

  componentDidMount() {
    this.delayedShowMarker()
  }

  delayedShowMarker = () => {
    setTimeout(() => {
      this.setState({ isMarkerShown: true })
    }, 3000)
  }

  handleMarkerClick = () => {
    this.setState({ isMarkerShown: false })
    this.delayedShowMarker()
  }

  render() {
    return (
      <MyMapComponent
        isMarkerShown={this.state.isMarkerShown}
        onMarkerClick={this.handleMarkerClick}
      />
    )
  }
}

in a React app created with create-react-app. I've added the above code to components/Map.js, added an export before the class MyFancyComponent, and modified App.js to the following (see https://github.com/khpeek/beomaps/blob/master/src/App.js):

import React from 'react';
import './App.css';

import { MyFancyComponent } from "./components/Map"

function App() {
  return (
    <div className="App">
      <MyFancyComponent/>
    </div>
  );
}

export default App;

However, if I run npm start and navigate to localhost:3000, I see this error:

So I see an error,

You have exceeded your request quota for this API.

and a warning,

Google Maps JavaScript API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

According to that warning,

The script element that loads the API has no API key. Please make sure you include a valid API key as a key parameter. You can generate a new API key on the Google Cloud Platform Console.

As I understand from https://github.com/tomchentw/react-google-maps/issues/275, one would fix this by adding

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" type="text/javascript"></script>

to the index.html. In this example created with create-react-app, however, there is no index.html, only an index.js, so it is unclear to me how to apply this advice.

Any ideas how to add the API key to this example?

Solution

You need to set up your Google maps API via key=YOUR_API in googleMapURL:"https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places",

Just like in Docs

googleMapURL:"https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places",

Comments

[SakoBu]

What do you mean there's not index.html? Look in public...

[Kurt Peek]

Got it, the key has to be added to the query string of the googleMapURL prop. I missed this because it is only in the first example, not the one given in Step 5 of those docs.

[Oliver Dixon]

Such a confusing way to add an API key.