title: Where to put clientId and signature in your Google Map API V3 request?
body: <p>I have written a JavaScript code. I wanted to use <code>durationInTraffic</code> in a request with Google Maps API V3. This feature is only available for Google Maps for Work customers.</p>
  
  <p><a href="https://developers.google.com/maps/documentation/geocoding/#api_key" rel="nofollow">Here</a> it says Maps for work customers should include their clientId and signature in their request. But where exactly do I put the clientId and signature in my request? Below is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt; 
  &lt;head&gt; 
     &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"/&gt; 
     &lt;script type="text/javascript" 
             src="http://maps.google.com/maps/api/js?"&gt;&lt;/script&gt;
  
  &lt;/head&gt; 
  &lt;body style="font-family: Arial; font-size: 13px; color: red;"&gt; 
  &lt;form&gt;
  &lt;input type="text" name="start" id="start" placeholder="Start"&gt; --&gt; &lt;input type="text" name="ziel" id="ziel" placeholder="Ziel"&gt;&lt;br&gt;
   &lt;br&gt;
   &lt;input type="text" name="stunde" id="stunde" placeholder="Stunde"&gt;:
  &lt;input type="text" name="minute" id="minute" placeholder="Minute"&gt;
  &lt;br&gt;
  &lt;input type="text" name="tag" id="tag" placeholder="Tag"&gt;-
  &lt;input type="text" name="monat" id="monat" placeholder="Monat"&gt;-
  &lt;input type="text" name="jahr" id="jahr" placeholder="Jahr"&gt;
  
  &lt;/form&gt; 
  &lt;input type="submit" value="Los!" onClick="getRoute()"&gt;
  
      &lt;div id="durationWithTraffic"&gt;Dauer mit Vekehr: &lt;/div&gt;    
     &lt;div id="durationWithoutTraffic"&gt;Dauer ohne Vekehr: &lt;/div&gt;    
     &lt;br&gt;
     &lt;script type="text/javascript"&gt; 
  function getRoute(){
     var directionsService = new google.maps.DirectionsService();
  
     var myOptions = {
       zoom:7,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     };
  
      var startValue=document.getElementById('start').value;
      var zielValue=document.getElementById('ziel').value;
  
          var stundeValue=document.getElementById('stunde').value;
      var minuteValue=document.getElementById('minute').value;
  
      var tagValue=document.getElementById('tag').value;
      var monatValue=document.getElementById('monat').value;
      var jahrValue=document.getElementById('jahr').value;
  
  //departure time in Epoch time
      var abfahrtsZeitValue=monatValue+"/"+tagValue+"/"+jahrValue+" "+stundeValue+":"+minuteValue;
  
          var request_withTraffic = {
              origin: startValue, 
              destination: zielValue,
              travelMode: google.maps.DirectionsTravelMode.DRIVING,
              transitOptions: {
                       departureTime: new Date(abfahrtsZeitValue)
                       },
               durationInTraffic: true
          };
  
          var request_withoutTraffic = {
              origin: startValue, 
              destination: zielValue,
              travelMode: google.maps.DirectionsTravelMode.DRIVING,
              transitOptions: {
                       departureTime: new Date(abfahrtsZeitValue)
                       },
               durationInTraffic: false
          };
  
     directionsService.route(request_withTraffic, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
  
           // Display the duration:
              document.getElementById('durationWithTraffic').innerHTML="Dauer mit Vekehr: "; 
              document.getElementById('durationWithTraffic').innerHTML += 
              response.routes[0].legs[0].duration.value + " seconds";            
        }
     });
  
     directionsService.route(request_withoutTraffic, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) 
          {   
              document.getElementById('durationWithoutTraffic').innerHTML="Dauer ohne Verkehr: "; 
              document.getElementById('durationWithoutTraffic').innerHTML += 
              response.routes[0].legs[0].duration.value + " seconds";            
          }
     });
  }
     &lt;/script&gt; 
  &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>