CODEWITHSUNDEEP
javascriptapiyoutubeyoutube-data-api
domi91c
domi91c

Reputation: 2053

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

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 Go to Credentials.

Clicked "API Key".

Clicked "API Key".

Clicked "Browser".

Clicked "Browser".

Set name and clicked create.

Set name and clicked create.

Copied and pasted API into JS file.

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'));

Upvotes: 6

Views: 3977

Answers (2)

Nigel
Nigel

Reputation: 59

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

Upvotes: 4

mhansen
mhansen

Reputation: 1141

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.

Upvotes: 1

Related Questions