REACT: Google Maps API key - Warning: NoApiKeys

Question

I have created a project that should display Google Map, but I constantly get a maps displayed with watermark and a warning in a console: Google Maps JavaScript API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys. Here's the React code snippet:

import React, { Fragment } from "react";
import { useJsApiLoader, GoogleMap, Marker } from "@react-google-maps/api";

const GoogleMapComp = () => {
  const { isLoaded } = useJsApiLoader({
    googleMapsApiKey: process.env.key,
  });

  const center = { lat: 42.4414, lng: 19.2624 };

  if (!isLoaded) {
    return (
      <div>
        <p>Loading...</p>
      </div>
    );
  }

  return (
    <Fragment>
      <GoogleMap
        center={center}
        zoom={15}
        mapContainerStyle={{
          width: "100%",
          height: "100%",
        }}
        options={{
          zoomControl: false,
          streetViewControl: false,
          mapTypeControl: false,
          fullscreenControl: false,
        }}
      >
        <Marker position={center} />
      </GoogleMap>
    </Fragment>
  );
};

export default GoogleMapComp;

I have tried to read documentation and create new API in google cloud platform, but nothing seems to help. Please, help!

Answer 1

You can:

1. Contact Google Maps Platform support so they can check your project to make sure it's set up correctly and you have a valid API key with the correct restrictions set. https://developers.google.com/maps/support#contact-maps-support

2. Check that the JS API loader is using V3 of the Maps JavaScript API.

3. When looking at your code I noticed that there is no 'id' in the useJsApiLoader() function:

    const { isLoaded } = useJsApiLoader({
      id: 'google-map-script',
      googleMapsApiKey: "YOUR_API_KEY"
    })
   
   

https://www.npmjs.com/package/@react-google-maps/api

4. You can also go here for more support: https://github.com/JustFly1984/react-google-maps-api/issues?page=1&q=is%3Aissue+is%3Aopen