I'm trying to use the example ponent given in Step 5 of ,

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

const MyMapComponent = pose(
  withProps({
    googleMapURL: ".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,
  }

  ponentDidMount() {
    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 ponents/Map.js, added an export before the class MyFancyComponent, and modified App.js to the following (see .js):

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

import { MyFancyComponent } from "./ponents/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

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 , one would fix this by adding

<script src="" 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?

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

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

const MyMapComponent = pose(
  withProps({
    googleMapURL: "https://maps.googleapis./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,
  }

  ponentDidMount() {
    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 ponents/Map.js, added an export before the class MyFancyComponent, and modified App.js to the following (see https://github./khpeek/beomaps/blob/master/src/App.js):

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

import { MyFancyComponent } from "./ponents/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./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./tomchentw/react-google-maps/issues/275, one would fix this by adding

<script src="https://maps.googleapis./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?

• javascript
• reactjs
• google-maps

• 2 What do you mean there's not index.html? Look in public... – SakoBu Commented May 4, 2019 at 1:33

1 Answer 1

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

Just like in Docs

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