{"id":3549,"date":"2022-10-06T17:48:52","date_gmt":"2022-10-06T12:48:52","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=3549"},"modified":"2022-10-06T17:55:26","modified_gmt":"2022-10-06T12:55:26","slug":"javascript-google-maps-distance-matrix-api-example-to-find-distance-time-between-two-addresses","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/javascript-google-maps-distance-matrix-api-example-to-find-distance-time-between-two-addresses\/","title":{"rendered":"JavaScript Google Maps Distance Matrix API Example to Find Distance & Time Between Two Addresses"},"content":{"rendered":"\n

In this tutorial, I will give you the complete JavaScript source code of the Google Maps Distance Matrix API example<\/strong>. You will learn how Google Maps Distance Matrix API<\/strong> measures the distance and calculates the journey duration between multiple locations (origins and destinations).<\/p>\n\n\n\n

First of all, create a new HTML5 file on your computer and copy\/paste the below source code into it.<\/p>\n\n\n\n

JavaScript Google Maps Distance Matrix API Example<\/h2>\n\n\n\n

index.html<\/h3>\n\n\n\n

Important Note:<\/strong> On line # 6, replace ###YOUR_API_KEY###<\/code> text with your actual Google Maps API key. Otherwise, this code will not work.<\/p>\n\n\n\n

<html>\n  <head>\n    <title>JavaScript Google Maps Distance Matrix API Example<\/title>\n    <meta http-equiv="Content-Type" content="text\/html; charset=utf-8" \/>\n    <script src="https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js"><\/script>\n    <script defer src="https:\/\/maps.googleapis.com\/maps\/api\/js?libraries=places&language=en&key=###YOUR_API_KEY###" type="text\/javascript"><\/script>\n    <link href="https:\/\/netdna.bootstrapcdn.com\/bootstrap\/3.2.0\/css\/bootstrap.min.css" id="bootstrap-css" rel="stylesheet"\/>\n  <\/head>\n  <body>\n    <div class="container">\n      <div class="row">\n        <div class="jumbotron">\n          <h1>JavaScript Google Maps Distance Matrix API Example<\/h1>\n        <\/div>\n\n        <div class="col-md-6">\n          <form id="distance_form">\n            <div class="form-group">\n              <label>Origin: <\/label>\n              <input\n                class="form-control"\n                id="from_places"\n                placeholder="Enter a location"\n              \/>\n              <input id="origin" name="origin" required="" type="hidden" \/>\n            <\/div>\n\n            <div class="form-group">\n              <label>Destination: <\/label>\n              <input\n                class="form-control"\n                id="to_places"\n                placeholder="Enter a location"\n              \/>\n              <input\n                id="destination"\n                name="destination"\n                required=""\n                type="hidden"\n              \/>\n            <\/div>\n            <input class="btn btn-primary" type="submit" value="Calculate" \/>\n          <\/form>\n\n          <div id="result">\n            <ul class="list-group">\n              <li\n                id="mile"\n                class="\n                  list-group-item\n                  d-flex\n                  justify-content-between\n                  align-items-center\n                "\n              >\n                Distance In Mile :\n              <\/li>\n              <li\n                id="kilo"\n                class="\n                  list-group-item\n                  d-flex\n                  justify-content-between\n                  align-items-center\n                "\n              >\n                Distance is Kilo:\n              <\/li>\n              <li\n                id="text"\n                class="\n                  list-group-item\n                  d-flex\n                  justify-content-between\n                  align-items-center\n                "\n              >\n                IN TEXT:\n              <\/li>\n              <li\n                id="minute"\n                class="\n                  list-group-item\n                  d-flex\n                  justify-content-between\n                  align-items-center\n                "\n              >\n                IN MINUTES:\n              <\/li>\n              <li\n                id="from"\n                class="\n                  list-group-item\n                  d-flex\n                  justify-content-between\n                  align-items-center\n                "\n              >\n                FROM:\n              <\/li>\n              <li\n                id="to"\n                class="\n                  list-group-item\n                  d-flex\n                  justify-content-between\n                  align-items-center\n                "\n              >\n                TO:\n              <\/li>\n            <\/ul>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n    <script>\n      $(function () {\n        \/\/ add input listeners\n        google.maps.event.addDomListener(window, "load", function () {\n          var from_places = new google.maps.places.Autocomplete(\n            document.getElementById("from_places")\n          );\n          var to_places = new google.maps.places.Autocomplete(\n            document.getElementById("to_places")\n          );\n\n          google.maps.event.addListener(\n            from_places,\n            "place_changed",\n            function () {\n              var from_place = from_places.getPlace();\n              var from_address = from_place.formatted_address;\n              $("#origin").val(from_address);\n            }\n          );\n\n          google.maps.event.addListener(\n            to_places,\n            "place_changed",\n            function () {\n              var to_place = to_places.getPlace();\n              var to_address = to_place.formatted_address;\n              $("#destination").val(to_address);\n            }\n          );\n        });\n        \/\/ calculate distance\n        function calculateDistance() {\n          var origin = $("#origin").val();\n          var destination = $("#destination").val();\n          var service = new google.maps.DistanceMatrixService();\n          service.getDistanceMatrix(\n            {\n              origins: [origin],\n              destinations: [destination],\n              travelMode: google.maps.TravelMode.DRIVING,\n              unitSystem: google.maps.UnitSystem.IMPERIAL, \/\/ miles and feet.\n              \/\/ unitSystem: google.maps.UnitSystem.metric, \/\/ kilometers and meters.\n              avoidHighways: false,\n              avoidTolls: false,\n            },\n            callback\n          );\n        }\n        \/\/ get distance results\n        function callback(response, status) {\n          if (status != google.maps.DistanceMatrixStatus.OK) {\n            $("#result").html(err);\n          } else {\n            var origin = response.originAddresses[0];\n            console.log(origin);\n            var destination = response.destinationAddresses[0];\n            console.log(destination);\n            if (response.rows[0].elements[0].status === "ZERO_RESULTS") {\n              $("#result").html(\n                "Better get on a plane. There are no roads between " +\n                  origin +\n                  " and " +\n                  destination\n              );\n            } else {\n              var distance = response.rows[0].elements[0].distance;\n              console.log(distance);\n              var duration = response.rows[0].elements[0].duration;\n              console.log(duration);\n              console.log(response.rows[0].elements[0].distance);\n              var distance_in_kilo = distance.value \/ 1000; \/\/ the kilom\n              var distance_in_mile = distance.value \/ 1609.34; \/\/ the mile\n              console.log(distance_in_kilo);\n              console.log(distance_in_mile);\n              var duration_text = duration.text;\n              var duration_value = duration.value;\n              $("#mile").html(\n                `Distance in Miles: ${distance_in_mile.toFixed(2)}`\n              );\n              $("#kilo").html(\n                `Distance in Kilometre: ${distance_in_kilo.toFixed(2)}`\n              );\n              $("#text").html(`Distance in Text: ${duration_text}`);\n              $("#minute").html(`Distance in Minutes: ${duration_value}`);\n              $("#from").html(`Distance From: ${origin}`);\n              $("#to").text(`Distance to: ${destination}`);\n            }\n          }\n        }\n        \/\/ print results on submit the form\n        $("#distance_form").submit(function (e) {\n          e.preventDefault();\n          calculateDistance();\n        });\n      });\n    <\/script>\n  <\/body>\n<\/html><\/pre><\/div>\n\n\n\n
Project Screenshot<\/h2>\n\n\n\n
\"JavaScript
JavaScript Google Maps Distance Matrix API Example<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"
In this tutorial, I will give you the complete JavaScript source code of the Google Maps Distance Matrix API example. You will learn how Google Maps Distance Matrix API measures the distance and calculates the journey duration between multiple locations (origins and destinations). First of all, create a new HTML5 file on your computer and … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":1762,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112],"tags":[],"class_list":["post-3549","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"\nJavaScript Google Maps Distance Matrix API Example to Find Distance & Time Between Two Addresses<\/title>\n<meta name=\"description\" content=\"In this tutorial, I will give you the complete JavaScript source code of the Google Maps Distance Matrix API example. You will learn how Google Maps\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.edopedia.com\/blog\/javascript-google-maps-distance-matrix-api-example-to-find-distance-time-between-two-addresses\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Google Maps Distance Matrix API Example to Find Distance & Time Between Two Addresses\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, I will give you the complete JavaScript source code of the Google Maps Distance Matrix API example. You will learn how Google Maps\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.edopedia.com\/blog\/javascript-google-maps-distance-matrix-api-example-to-find-distance-time-between-two-addresses\/\" \/>\n<meta property=\"og:site_name\" content=\"Edopedia\" \/>\n<meta property=\"article:author\" content=\"trulyfurqan\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-06T12:48:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-06T12:55:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/scrnli_10_6_2022_5-51-08-PM-1024x568.png\" \/>\n<meta name=\"author\" content=\"Furqan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Furqan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Google Maps Distance Matrix API Example to Find Distance & Time Between Two Addresses","description":"In this tutorial, I will give you the complete JavaScript source code of the Google Maps Distance Matrix API example. You will learn how Google Maps","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.edopedia.com\/blog\/javascript-google-maps-distance-matrix-api-example-to-find-distance-time-between-two-addresses\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Google Maps Distance Matrix API Example to Find Distance & Time Between Two Addresses","og_description":"In this tutorial, I will give you the complete JavaScript source code of the Google Maps Distance Matrix API example. You will learn how Google Maps","og_url":"https:\/\/www.edopedia.com\/blog\/javascript-google-maps-distance-matrix-api-example-to-find-distance-time-between-two-addresses\/","og_site_name":"Edopedia","article_author":"trulyfurqan","article_published_time":"2022-10-06T12:48:52+00:00","article_modified_time":"2022-10-06T12:55:26+00:00","og_image":[{"url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/scrnli_10_6_2022_5-51-08-PM-1024x568.png","type":"","width":"","height":""}],"author":"Furqan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Furqan","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.edopedia.com\/blog\/javascript-google-maps-distance-matrix-api-example-to-find-distance-time-between-two-addresses\/#article","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/javascript-google-maps-distance-matrix-api-example-to-find-distance-time-between-two-addresses\/"},"author":{"name":"Furqan","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339"},"headline":"JavaScript Google Maps Distance Matrix API Example to Find Distance & Time Between Two Addresses","datePublished":"2022-10-06T12:48:52+00:00","dateModified":"2022-10-06T12:55:26+00:00","mainEntityOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/javascript-google-maps-distance-matrix-api-example-to-find-distance-time-between-two-addresses\/"},"wordCount":114,"commentCount":0,"publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/javascript-google-maps-distance-matrix-api-example-to-find-distance-time-between-two-addresses\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.edopedia.com\/blog\/javascript-google-maps-distance-matrix-api-example-to-find-distance-time-between-two-addresses\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.edopedia.com\/blog\/javascript-google-maps-distance-matrix-api-example-to-find-distance-time-between-two-addresses\/","url":"https:\/\/www.edopedia.com\/blog\/javascript-google-maps-distance-matrix-api-example-to-find-distance-time-between-two-addresses\/","name":"JavaScript Google Maps Distance Matrix API Example to Find Distance & Time Between Two Addresses","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/javascript-google-maps-distance-matrix-api-example-to-find-distance-time-between-two-addresses\/#primaryimage"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/javascript-google-maps-distance-matrix-api-example-to-find-distance-time-between-two-addresses\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","datePublished":"2022-10-06T12:48:52+00:00","dateModified":"2022-10-06T12:55:26+00:00","description":"In this tutorial, I will give you the complete JavaScript source code of the Google Maps Distance Matrix API example. You will learn how Google Maps","breadcrumb":{"@id":"https:\/\/www.edopedia.com\/blog\/javascript-google-maps-distance-matrix-api-example-to-find-distance-time-between-two-addresses\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.edopedia.com\/blog\/javascript-google-maps-distance-matrix-api-example-to-find-distance-time-between-two-addresses\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/javascript-google-maps-distance-matrix-api-example-to-find-distance-time-between-two-addresses\/#primaryimage","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","width":880,"height":495,"caption":"Default Featured Image"},{"@type":"BreadcrumbList","@id":"https:\/\/www.edopedia.com\/blog\/javascript-google-maps-distance-matrix-api-example-to-find-distance-time-between-two-addresses\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.edopedia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript Google Maps Distance Matrix API Example to Find Distance & Time Between Two Addresses"}]},{"@type":"WebSite","@id":"https:\/\/www.edopedia.com\/blog\/#website","url":"https:\/\/www.edopedia.com\/blog\/","name":"Edopedia","description":"Coding\/Programming Blog","publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.edopedia.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.edopedia.com\/blog\/#organization","name":"Edopedia","url":"https:\/\/www.edopedia.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","width":400,"height":100,"caption":"Edopedia"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339","name":"Furqan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","caption":"Furqan"},"description":"Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.","sameAs":["http:\/\/www.edopedia.com\/blog\/","trulyfurqan"],"url":"https:\/\/www.edopedia.com\/blog\/author\/furqan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3549","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/comments?post=3549"}],"version-history":[{"count":4,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3549\/revisions"}],"predecessor-version":[{"id":3555,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3549\/revisions\/3555"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media\/1762"}],"wp:attachment":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media?parent=3549"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/categories?post=3549"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/tags?post=3549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}