React Google Maps API Key Not Translating

70 views Asked by At

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.

0

There are 0 answers