`Google Maps API warning: NoApiKeys ` when trying to access Youtube Data Api v3

Question

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

Clicked Go to Credentials.

Clicked "API Key".

Clicked "Browser".

Set name and clicked create.

Copied and pasted API into 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 "maps.googleapis.com/maps/api/js" in your index.html file. Comment out that line to prevent google maps trying to load up without a key

Answer 2

You must be loading the Google Maps API without specifying an API key.

Have a look in the Network tab of Chrome Dev Tools and see if anything's loading /maps/api/js - then try and track down which part of your code is pulling in the Google Maps API.