2

My code is working fine on localhost, I am using google-map-react package to render map on my react app but when i merged the code in QA or PROD environment the map gets loaded for a second and then it says error and when i check the console windows it says "InvalidKeyMapError" even though i have provided the API key.

Here is my code:

import React, { useState } from 'react';
import GoogleMapReact from 'google-map-react';
import Marker from './marker';
import APIUrls from "../../../services/urls";


const GoogleMap = (props) => {
 const defaultCenter = {
      lat: 59.95,
      lng: 30.33
}
const center = {
    lat: 59.95,
    lng: 30.33
 }
  const zoom= 11
  
return (
    <div style={{ height: '100vh', width: '100%' }}>
    <GoogleMapReact
        yesIWantToUseGoogleMapApiInternals
        bootstrapURLKeys={{ key: APIUrls.googleMapsAPIKey }}
        defaultCenter={defaultCenter}
        defaultZoom={zoom}
        center={center}
    >
      <Marker
        lat={59.955413}
        lng={30.337844}
        text="My Marker"
      />
    </GoogleMapReact>
  </div>
  );
 }

export default GoogleMap;
Jujosiga
  • 409
  • 2
  • 7
Minks
  • 55
  • 1
  • 2
  • 10

1 Answers1

0

Google's documentation on InvalidKeyMapError says:

The API key included in the script element that loads the API is not found. Please make sure you are using a correct API key. You can generate a new API key in the Google Cloud Platform Console.

Where did you provide your API key? Are you adding or importing it from the same file used on localhost? Your API key may not be getting inserted into the Maps API script due to prod environment not factoring in the API key in the same way you do localhost. I'd double check that and test it by hard-coding the key in prod.

If the key is indeed rendered and you're still getting errors, then try unrestricting it completely. Does it work now? If so, make sure you add proper referrer restrictions for your production domain. E.g.: *.production-domain.com/*.

evan
  • 5,443
  • 2
  • 11
  • 20