title: Google Calendar API - Request URL 404 Not Found
body: <p>I am trying to get events from my calendar by using the Google API:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="googleCalendar.js"&gt;&lt;/script&gt;
          &lt;script src="https://apis.google.com/js/client.js?onload=handleClientLoad"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;div id="calendarContainer"&gt;
              &lt;div&gt;
                  &lt;button type="button" id="authorize-button"&gt;&lt;?= _("Google Calendar Events"); ?&gt;&lt;/button&gt;
              &lt;/div&gt;
  
              &lt;div id="content"&gt;
                  &lt;h2&gt;&lt;?= _("Events"); ?&gt;&lt;/h2&gt;&lt;br&gt;
                  &lt;ul id="events"&gt;&lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>googleCalendar.js:</p>
  
  <pre><code>$(document).ready(function() {
      var clientId = '{my_client_id}';
      var apiKey = '{my_api_key}';
      var scopes = 'https://www.googleapis.com/auth/calendar';
  
      $("#authorize-button").click(function(){
          handleClientLoad();
      });
  
      function handleClientLoad()
      {
          gapi.client.setApiKey(apiKey);
          window.setTimeout(checkAuth,1);
          checkAuth();
      }
  
      function checkAuth()
      {
          gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true},
          handleAuthResult);
      }
  
      function handleAuthResult(authResult)
      {
          var authorizeButton = document.getElementById('authorize-button');
          if (authResult) {
              //authorizeButton.style.visibility = 'hidden';
              makeApiCall();
          } else {
              authorizeButton.style.visibility = '';
              authorizeButton.onclick = handleAuthClick;
          }
      }
  
      function handleAuthClick(event)
      {
          gapi.auth.authorize(
              {client_id: clientId, scope: scopes, immediate: false},
              handleAuthResult
          );
          return false;
      }
  
      function makeApiCall()
      {
          gapi.client.load('calendar', 'v3', function() {
              var request = gapi.client.calendar.events.list({
                  'calendarId': 'primary'
              });
  
              request.execute(function(resp) {
                  console.log(resp);
                  for (var i = 0; i &lt; resp.items.length; i++) {
                      var li = document.createElement('li');
                     li.appendChild(document.createTextNode(resp.items[i].summary));
                  document.getElementById('events').appendChild(li);
                  }
              });
          });
      }
  
  });
  </code></pre>
  
  <p>When I click the button in order to get my events I get nothing. Then I inspect my page and I get this:</p>
  
  <blockquote>
    <p>Request URL: 
    <a href="https://content.googleapis.com/calendar/v3/calendars/primary/events?key=" rel="nofollow">https://content.googleapis.com/calendar/v3/calendars/primary/events?key=</a>{my_api_key}</p>
    
    <p>Status Code: 404 Not found</p>
  </blockquote>
  
  <p>Pasting that URL in my browser I get this:</p>
  
  <pre><code>{
      "error": {
          "errors": [
              {
                  "domain": "global",
                  "reason": "notFound",
                  "message": "Not Found"
              }
          ],
          "code": 404,
          "message": "Not Found"
      }
  }
  </code></pre>
  
  <p>Why do I get a 404 not found and I don't get the list of events from my calendar?</p>