Google Maps API Warning: NoApiKeys when trying to access Youtube Api v3 data

Question

I am following the Modern Redux With React tutorial and trying to access the Youtube v3 data API, but in the Chrome console I get a Google Maps API warning: NoApiKeys . I'm not sure why I get a Google Maps warning because I registered an API key for Youtube.

Click Go To Credentials.

Click the API Key.

Click Browser.

Specify a name and click the Create button.

The copied and pasted API in the JS file.

 import React, {Component} from 'react'; import * as ReactDOM from "react/lib/ReactDOM"; import YTSearch from 'youtube-api-search'; import SearchBar from './components/search_bar'; const API_KEY = 'AIzaSyD9WN2t4lhIZ5Es34jwaerM98r2nSutLJs'; class App extends Component { constructor(props) { super(props); this.state = {videos: []}; YTSearch({key: API_KEY, term: 'surfboards'}, (videos) => { console.log(data); this.setState({videos}); }); } render() { return ( <div> <SearchBar /> </div> ); } } ReactDOM.render(<App />, document.querySelector('.container')); 

Answer 1

This is because you have the maps.googleapis.com/maps/api/js file in the index.html file. Comment on this line to prevent Google Maps from loading without a key.

Answer 2

You must download the Google Maps API without specifying an API key.

Take a look at the Network tab in the Chrome Dev Tools section and see if /maps/api/js has downloaded anything, then try and track what part of the code is in the Google Maps API.