CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
thadeuszlay
thadeuszlay

Reputation: 3015

Where to put clientId and signature in your Google Map API V3 request?

I have written a JavaScript code. I wanted to use durationInTraffic in a request with Google Maps API V3. This feature is only available for Google Maps for Work customers.

Here 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:

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <script type="text/javascript" 
           src="http://maps.google.com/maps/api/js?"></script>

</head> 
<body style="font-family: Arial; font-size: 13px; color: red;"> 
<form>
<input type="text" name="start" id="start" placeholder="Start"> --> <input type="text" name="ziel" id="ziel" placeholder="Ziel"><br>
 <br>
 <input type="text" name="stunde" id="stunde" placeholder="Stunde">:
<input type="text" name="minute" id="minute" placeholder="Minute">
<br>
<input type="text" name="tag" id="tag" placeholder="Tag">-
<input type="text" name="monat" id="monat" placeholder="Monat">-
<input type="text" name="jahr" id="jahr" placeholder="Jahr">

</form> 
<input type="submit" value="Los!" onClick="getRoute()">

    <div id="durationWithTraffic">Dauer mit Vekehr: </div>    
   <div id="durationWithoutTraffic">Dauer ohne Vekehr: </div>    
   <br>
   <script type="text/javascript"> 
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";            
        }
   });
}
   </script> 
</body> 
</html>

Upvotes: 1

Views: 3494

Answers (1)

Laxmikant Dange
Laxmikant Dange

Reputation: 7688

You have to provide your client id and signature while calling your script,

Here is your map script

<script src="https://maps.googleapis.com/maps/api/js?client=YOUR_CLIENT_ID&v=3.17&signature=base64signature"></script>

for reference

https://developers.google.com/maps/documentation/business/clientside/#client_id https://developers.google.com/maps/documentation/business/webservices/auth#signature_examples

Upvotes: 2

Related Questions