Distance Matrix Service

function initMap(): void {  const bounds = new google.maps.LatLngBounds();  const markersArray: google.maps.Marker[] = [];  const map = new google.maps.Map(  document.getElementById("map") as HTMLElement,  {  center: { lat: 55.53, lng: 9.4 },  zoom: 10,  }  );  // initialize services  const geocoder = new google.maps.Geocoder();  const service = new google.maps.DistanceMatrixService();  // build request  const origin1 = { lat: 55.93, lng: -3.118 };  const origin2 = "Greenwich, England";  const destinationA = "Stockholm, Sweden";  const destinationB = { lat: 50.087, lng: 14.421 };  const request = {  origins: [origin1, origin2],  destinations: [destinationA, destinationB],  travelMode: google.maps.TravelMode.DRIVING,  unitSystem: google.maps.UnitSystem.METRIC,  avoidHighways: false,  avoidTolls: false,  };  // put request on page  (document.getElementById("request") as HTMLDivElement).innerText =  JSON.stringify(request, null, 2);  // get distance matrix response  service.getDistanceMatrix(request).then((response) => {  // put response  (document.getElementById("response") as HTMLDivElement).innerText =  JSON.stringify(response, null, 2);  // show on map  const originList = response.originAddresses;  const destinationList = response.destinationAddresses;  deleteMarkers(markersArray);  const showGeocodedAddressOnMap = (asDestination: boolean) => {  const handler = ({ results }: google.maps.GeocoderResponse) => {  map.fitBounds(bounds.extend(results[0].geometry.location));  markersArray.push(  new google.maps.Marker({  map,  position: results[0].geometry.location,  label: asDestination ? "D" : "O",  })  );  };  return handler;  };  for (let i = 0; i < originList.length; i++) {  const results = response.rows[i].elements;  geocoder  .geocode({ address: originList[i] })  .then(showGeocodedAddressOnMap(false));  for (let j = 0; j < results.length; j++) {  geocoder  .geocode({ address: destinationList[j] })  .then(showGeocodedAddressOnMap(true));  }  }  }); } function deleteMarkers(markersArray: google.maps.Marker[]) {  for (let i = 0; i < markersArray.length; i++) {  markersArray[i].setMap(null);  }  markersArray = []; } declare global {  interface Window {  initMap: () => void;  } } window.initMap = initMap;
index.ts

function initMap() {  const bounds = new google.maps.LatLngBounds();  const markersArray = [];  const map = new google.maps.Map(document.getElementById("map"), {  center: { lat: 55.53, lng: 9.4 },  zoom: 10,  });  // initialize services  const geocoder = new google.maps.Geocoder();  const service = new google.maps.DistanceMatrixService();  // build request  const origin1 = { lat: 55.93, lng: -3.118 };  const origin2 = "Greenwich, England";  const destinationA = "Stockholm, Sweden";  const destinationB = { lat: 50.087, lng: 14.421 };  const request = {  origins: [origin1, origin2],  destinations: [destinationA, destinationB],  travelMode: google.maps.TravelMode.DRIVING,  unitSystem: google.maps.UnitSystem.METRIC,  avoidHighways: false,  avoidTolls: false,  };  // put request on page  document.getElementById("request").innerText = JSON.stringify(  request,  null,  2,  );  // get distance matrix response  service.getDistanceMatrix(request).then((response) => {  // put response  document.getElementById("response").innerText = JSON.stringify(  response,  null,  2,  );  // show on map  const originList = response.originAddresses;  const destinationList = response.destinationAddresses;  deleteMarkers(markersArray);  const showGeocodedAddressOnMap = (asDestination) => {  const handler = ({ results }) => {  map.fitBounds(bounds.extend(results[0].geometry.location));  markersArray.push(  new google.maps.Marker({  map,  position: results[0].geometry.location,  label: asDestination ? "D" : "O",  }),  );  };  return handler;  };  for (let i = 0; i < originList.length; i++) {  const results = response.rows[i].elements;  geocoder  .geocode({ address: originList[i] })  .then(showGeocodedAddressOnMap(false));  for (let j = 0; j < results.length; j++) {  geocoder  .geocode({ address: destinationList[j] })  .then(showGeocodedAddressOnMap(true));  }  }  }); } function deleteMarkers(markersArray) {  for (let i = 0; i < markersArray.length; i++) {  markersArray[i].setMap(null);  }  markersArray = []; } window.initMap = initMap;
index.js

/* Optional: Makes the sample page fill the window. */ html, body {  height: 100%;  margin: 0;  padding: 0; } #container {  height: 100%;  display: flex; } #sidebar {  flex-basis: 15rem;  flex-grow: 1;  padding: 1rem;  max-width: 30rem;  height: 100%;  box-sizing: border-box;  overflow: auto; } #map {  flex-basis: 0;  flex-grow: 4;  height: 100%; } #sidebar {  flex-direction: column; } 
style.css

<html> <head> <title>Distance Matrix Service</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="container"> <div id="map"></div> <div id="sidebar"> <h3 style="flex-grow: 0">Request</h3> <pre style="flex-grow: 1" id="request"></pre> <h3 style="flex-grow: 0">Response</h3> <pre style="flex-grow: 1" id="response"></pre> </div> </div> <!-- The `defer` attribute causes the script to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly" defer ></script> </body> </html>
index.html