fullcalenderでgooglecalenderが紐づかない

何度トライしてもfullcalenderでgooglecalenderが紐づかないため、質問させていただきます！

予定が表示されないカレンダーのみが表示され、
googlecalenderの予定が表示されない状態です。

cssとjsが正く読み込めていること、
APIとカレンダーIDが正しいものであることは確認しています。

よろしくお願いいたします！

<html lang="ja">
<head>
<meta charset='utf-8' />
<link href='css/main.css' rel='stylesheet' />
<link href='css/fullcalendar.min.css' rel='stylesheet' />
<link href='css/fullcalendar.print.min.css' rel='stylesheet' media='print' />

<script src='js/main.js'></script>
<script src='js/moment.min.js'></script>
<script src='js/jquery.min.js'></script>
<script src='js/fullcalendar.min.js'></script>

<script>
  $(document).ready(function() {
    $('#calendar').fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,listYear'
      },
      displayEventTime: false, 
      googleCalendarApiKey: '＜実際のAPI入れています＞',
      events: '＜実際のカレンダーID入れています＞',
      eventClick: function(event) {
        // opens events in a popup window
        window.open(event.url, 'gcalevent', 'width=700,height=600');
        return false;
      },
      loading: function(bool) {
        $('#loading').toggle(bool);
      }
    });
  });
  
</script>


</head>
<body>

<div id="calendar"></div>

</body>
</html>