1

I am trying to implement the simple example shown on the google-map-react npm website found here, https://www.npmjs.com/package/google-map-react, but I can't seem to get the API key to translate onto the request URL.

When my component loads in the browser, the network request that fires off to the Google maps API always has "YOUR_API_KEY_HERE" in the url. I've tried all sorts of things, but no luck so far. Here's a snippet of things.

import GoogleMapReact from 'google-map-react

const defaultMapSettings = {
    center: [42.00, -95.00],
    zoom: 3
};

<GoogleMapReact
    bootstrapURLKeys={{key:"my_actual_api_key_hardcoded_as_a_string"}} 
    defaultCenter= {defaultMapSettings.center}
    defaultZoom={defaultMapSettings.zoom}
    yesIWantToUseGoogleMapApiInternals
    
/>

And then the network call....
Request URL: https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE

And because of that, I get back "Google Maps JavaScript API error: InvalidKeyMapError".

Thank you for your help in advance.

Aous Mohammad
  • 802
  • 2
  • 16
LuckyPierre
  • 31
  • 4
  • do you have a valid API key from google map ? – Aous Mohammad Apr 28 '23 at 16:42
  • Yeah, it's a key I've had for years and is currently used on another website I am rewriting. – LuckyPierre Apr 28 '23 at 16:55
  • Please provide a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). A working codesandbox or code snippet that demonstrates the same issue would be great. – Yrll May 21 '23 at 23:55

0 Answers0