Home/ Questions/Q 8767997
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T16:57:33+00:00

Why my code not display distance and duration? This is my code(html + js):

  • 0

Why my code not display distance and duration?

This is my code(html + js):

<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
      <meta charset="utf-8" />
      <title>Google</title>
      <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
      <style type="text/css">
         #result{
         width: 300px;
         height: 400px;
         background-color: red;
         }
      </style>

      <script>
         var service = new google.maps.DistanceMatrixService();
         service.getDistanceMatrix(
         {
         origins: ["Berlin"],
         destinations: ["Frankfurt"],
         travelMode: google.maps.TravelMode.DRIVING,
         }, callback);

         function callback(response, status) {
         $("#result").text(response.rows[0].elements.distance.text + " and " + response.rows[0].elements.duration.text);
         }
      </script>
   </head>

   <body>
      <div id="result"></div>
   </body>
</html>

This is example JSON output:

http://maps.googleapis.com/maps/api/distancematrix/json?origins=Berlin&destinations=Frankfurt&mode=driving&language=de-DE&sensor=false

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    elements is also an array, so your callback function has to look like this:

     function callback(response, status) {
     $("#result").text(response.rows[0].elements[0].distance.text + " and " + response.rows[0].elements[0].duration.text);
 }

    Here is a working JSfiddle.

    Hint: use the Javascript console to see errors in your Javascript.

    • 0