React-google-maps: Where do I add the Google Maps API

[WebRuin]

js:35 Google Maps API error: ApiNotActivatedMapError https://developers.google.com/maps/documentation/javascript/error-messages#api-not-activated-map-error

I am using with /react-google-maps https://github.com/kriasoft/react-starter-kit

[jmagrippis]

As the error message you are getting suggests, this doesn't look related to react-google-maps or React; you just need to enable the Google Maps Javascript API.

You can do that for your project by navigating https://console.developers.google.com/apis. Are you trying to pass an API key when loading the script? You should create a new one just for that project, and pass that along.

[rewop]

It looks like the Google account and project you are using doesn't have Google maps activated.

You need to set it up from Google console.

Maybe this link can help you setting it up.

[rewop]

@jmagrippis sorry I saw your comment just after posting mine :)

[ClementParis016]

Then where do you need to pass your Google Maps API key to react-google-maps? Is it even supported to pass an API key? I guess we should add instructions for this in the README ;)

[jmagrippis]

@ClementParis016 You would add it where you import the script for the Google maps API, so if you just include it synchronously, you'd do something like:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" type="text/javascript"></script>

If you are using the ScriptjsLoader to load the script asynchronously, you can sorta derive from the async example that you should pass it in its "query" property. Something like:

<ScriptjsLoader
  hostname={"maps.googleapis.com"}
  pathname={"/maps/api/js"}
  query={{ key: 'YOUR_API_KEY', libraries: 'geometry,drawing,places' }}
  //...

I do feel including that script is something a lot of people using this library might struggle with, or be neglecting to add their own keys, so I do agree it'd be helpful to add a section to the README.

[ClementParis016]

@jmagrippis that's exactly the explanation I was looking for, thanks!
+1 for adding this to the README, I could write a PR once I've set this up for my project

[rewop]

@ClementParis016 @jmagrippis feel free to make a pull request for the README. I think this issue can be closed.

[cristiandley]

https://github.com/tomchentw/react-google-maps/pull/284 new pull request made, please review it.

[patelrohan]

Could you still use <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" type="text/javascript"></script> if you are using withGoogleMap and supplying prop googleMapURL? Just wondering fig readme could be updated to reflect the correct API_KEY usage., it would save a lot of developers' time.