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!

JimmyP · Accepted Answer · 2023-10-20 10:24:53Z

0

You can:

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
Check that the JS API loader is using V3 of the Maps JavaScript API.

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

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

answered Oct 20, 2023 at 10:24

JimmyP

703 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Orwellian Over a year ago

Thank you so much! I just overlooked id property. :D

Collectives™ on Stack Overflow

REACT: Google Maps API key - Warning: NoApiKeys

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related