CODEWITHSUNDEEP
javascriptjavajsongoogle-distancematrix-api
sheslv
sheslv

Reputation: 13

get distance using google maps distance matrix api JSON output

I developed the following code to get the distance of the given 2 cities through 2 textfields and i want to send them to google maps distance matrix api using the following URl. I send those cities and got the JSON output file. but my problem is how can i get the specific attribute(distance) from that JSON file and display on a another textfield. 

function m() {

            var x = document.getElementById("autocomplete").value;
            var y = document.getElementById("autocomplete1").value;

            var url = "https://maps.googleapis.com/maps/api/distancematrix/json?origins=" + x + "&destinations=" + y + "&key=AIzaSyD5KX6VRon6yQ0vu4s6GSnAVzazRWg8wrc";

window.location=url; // this will go to the above url and display the JSON output file on the browser. I dont want that to be shown. just some processing and should display only the distance form that file on a textfield!

}

the JSON output file http://pastebin.ca/3318529

Please help to solve this. i am new to JSON. So if you have any other ideas tell me. Many thanks :)

Upvotes: 1

Views: 5098

Answers (2)

Unni Krishnan
Unni Krishnan

Reputation: 1

You can check out this code

<?php
 $addressFrom="Your from address";
 $addressTo="your to address";
  // Change address format
  $formattedAddrFrom    = str_replace(' ', '+', $addressFrom);
  $formattedAddrTo     = str_replace(' ', '+', $addressTo);
  
  // Geocoding API request with start address
  $distance_data = file_get_contents('https://maps.googleapis.com/maps/api/distancematrix/json?origins='.$formattedAddrFrom.'&destinations='.$formattedAddrTo.'&sensor=false&key=YOUR-API-KEY');
  $output_data = json_decode($distance_data);
  if(!empty($output_data->error_message)){
      return $output_data->error_message;
  }
 //echo "<pre>";
//print_r($output_data) ;

$output_status = $output_data->status;
$output_km =$output_data->rows[0]->elements[0]->distance->text;
$output_meter =$output_data->rows[0]->elements[0]->distance->value;
?>

Upvotes: 0

AHOYAHOY
AHOYAHOY

Reputation: 1847

If you use Javascript in Browser, you need use Google Maps Api.

Check this example:

<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script>
function init() {
  var service = new google.maps.DistanceMatrixService;
  service.getDistanceMatrix({
    origins: ['Los Angeles'],
    destinations: ['New York'],
    travelMode: google.maps.TravelMode.DRIVING,
    unitSystem: google.maps.UnitSystem.METRIC,
    avoidHighways: false,
    avoidTolls: false
  }, function(response, status) {
    if (status !== google.maps.DistanceMatrixStatus.OK) {
      alert('Error was: ' + status);
    } else {
      alert(response.originAddresses[0] + ' --> ' + response.destinationAddresses[0] + ' ==> ' + response.rows[0].elements[0].distance.text);
    }
  });
}
</script>
<body onload="init()">
</body>

Running example https://jsfiddle.net/3b03m5mt/

Upvotes: 1

Related Questions