Javascript Google Distance Matrix Api, tylko w JS

pytanie zadane 8 czerwca 2018 w JavaScript przez Mateusz Sobczyk Nowicjusz (120 p.)

Witam wszystkich.
Napisałem kod w html i Js który zwraca mi czas podróży samochodem z pkt A do pkt B. Problem w tym że jest on w html, a ja potrzebuję go w samej JavaScripcie by potem używać go w projekcie z javy. Wie ktoś jak mogę to umieścic w jednym skrypcie by działało prawidłowo ? tak aby ten script async src="https://maps.googleapis.com.... był w funkcji initMap. Kod programu:

DOCTYPE html>
<html>
  <head>
      <script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD3NJp3ulVas-S9ef_F4CzKLzEloDBwmZE&callback=initMap"> </script>
      <div id="output"></div>
  <head>
  <body>
    <script>
      function initMap() {
      
      
        var origin = 'Sopocka 25, Wroclaw, Poland';//{lat: 51.116931, lng: 17.067401}; //51.116931, 17.067401
        var destination = {lat: 51.098039, lng: 16.994165};//51.098039, 16.994165
        var origin2 = 'Greenwich, England';
        var destinationA = 'Stockholm, Sweden';
    
        var geocoder = new google.maps.Geocoder;
        var service = new google.maps.DistanceMatrixService;
        var date = new Date(); date.setDate(date.getDate());
         
         DrivingOptions = {
            departureTime: date,
            trafficModel: 'optimistic'
        };
        
        service.getDistanceMatrix(
        {
        origins: [origin],
        destinations: [destination],
        travelMode: 'DRIVING',
        drivingOptions : DrivingOptions,
        unitSystem: google.maps.UnitSystem.METRIC,
        durationInTraffic: true,
        avoidHighways: false,
        avoidTolls: false
        },

        function(response, status) 
        {
            var origin = response.originAddresses[0];
            var destination = response.destinationAddresses[0];
            var outputDiv = document.getElementById('output'); outputDiv.innerHTML = '';

            var results = response.rows[0].elements;
            geocoder.geocode({'address': origin}, function(results, status){});
            geocoder.geocode({'address': destination}, function(results, status){});
            
            outputDiv.innerHTML += results[0].duration.value ;
                      
        });
      }

    </script>
  </body>
</html>

1 odpowiedź

odpowiedź 9 czerwca 2018 przez Chess Szeryf (76,710 p.)
edycja 9 czerwca 2018 przez Chess

Nie wiem, czy jest inny sposób niż tworzenie znacznika script dynamicznie.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement

W skrypcie dopisz tylko:

newScript.setAttribute('async','');

Po modyfikacji skryptu z MDN:

<body style="background:grey">

<script>
function loadError(oError) {
  throw new URIError("The script " + oError.target.src + " didn't load correctly.");
}

function affixScriptToHead(url, onloadFunction) {
  var newScript = document.createElement("script");
  newScript.onerror = loadError;
  if (onloadFunction) { newScript.onload = onloadFunction; }
  document.head.appendChild(newScript);
  newScript.src = url;
  newScript.setAttribute('async','');
}

affixScriptToHead('something1.js',function() {
	var x = 4;

	console.log(x+u);
    // result: 9
});
</script>

</body>

something1.js: