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?

Answer 1

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",