title: Using a Google Apps API key with Distance Matrix
body: <p>I am using the <a href="https://developers.google.com/maps/documentation/distancematrix/" rel="nofollow noreferrer">Google Distance Matrix API</a> and the documentation tells me I need an API key (but I can use it without one.)  I'd like to be able to monitor use but I'm stumped as to how to set it up.</p>
  
  <p>I have a valid browser application API key from the Google Developers Console, it's new so I'm assuming it's a version 3 key.</p>
  
  <p>I have added valid referers in the console</p>
  
  <p>I have <code>&lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp"&gt;&lt;/script&gt;</code> on my page</p>
  
  <p>I'm using code like this</p>
  
  <pre><code>function callback(response, status) {
      if (status!==google.maps.DistanceMatrixStatus.OK) {
          _googleError('Error was: ' + status);
      } else {
          var origins = response.originAddresses;
  
          for (var i = 0; i &lt; origins.length; i++) {
              var results = response.rows[i].elements;
              for (var j = 0; j &lt; results.length; j++) {
                      $("#calcDistance").val(results[j].distance.text);
                 //Other stuff that works here
              }
          }
      }
  }
  
  function calculateDistances(start, end) {
      var service = new google.maps.DistanceMatrixService();
      service.getDistanceMatrix(
          {
              origins: [start],
              destinations: [end],
              travelMode: google.maps.TravelMode.DRIVING,
              unitSystem: google.maps.UnitSystem.IMPERIAL,
              avoidHighways: false,
              avoidTolls: false
          }, callback);
  }
  </code></pre>
  
  <p>As it is things work just fine.  When I try to add the key in things go south.  I've tried </p>
  
  <p><code>&lt;script src="https://maps.googleapis.com/maps/api/js?key={MY_KEY}&amp;v=3.exp"&gt;&lt;/script&gt;</code> </p>
  
  <p>and </p>
  
  <p><code>&lt;script src="https://maps.googleapis.com/maps/api/js?key={MY_KEY}"&gt;&lt;/script&gt;</code></p>
  
  <p>with no luck.  When I do either of those I get an error about invalid URL, <a href="https://stackoverflow.com/questions/12456714/google-distance-matrix-api-v3-showing-error">similar to this question</a>.</p>
  
  <p>I've also tried adding <code>key: {MY_KEY},</code> into <code>calculateDistances()</code> - no luck with that either.</p>
  
  <p>Am I missing something obvious?  (I feel like I am)</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>@Dr.Molle's answer got me what I was looking for.  I turned on "Google Maps JavaScript API v3" and changed <code>&lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp"&gt;&lt;/script&gt;</code> to <code>&lt;script src="https://maps.googleapis.com/maps/api/js?key={MY_KEY}&amp;v=3.exp"&gt;&lt;/script&gt;</code>  Now I can view activity in the Developer Console like I wanted.</p>