Bien, entonces tengo una lista de empresas, cada una con su propio div creado a través de DOM (document.create(div)) bla, bla, bla

negocio div 1. 12 millas (solo se muestra en el primer div)
negocio div 2
negocio div 3 etc

Estoy usando la matriz de distancia de Google para calcular la ubicación de los usuarios en el negocio que eligen. He podido obtener los cálculos con mi código, vea a continuación. Pero la distancia solo aparece para el primer div. Probé todos los bucles posibles y todavía no puedo hacer que se publique para cada listado de negocios

si está familiarizado con esta api, use el enlace api a continuación con su propia clave api

e ingrese sus propias coordenadas para probar el código

var latitude = localStorage.getItem("userLocationLat");
var longitud = localStorage.getItem("userLocationLong");

 var service = new google.maps.DistanceMatrixService(); // build request var origin1 = new google.maps.LatLng(latitude, longitude); var destinationA = new google.maps.LatLng(bizlatitude, bizlongitude); var request = { origins: [origin1], destinations: [destinationA], travelMode: google.maps.TravelMode.DRIVING, unitSystem: google.maps.UnitSystem.IMPERIAL, avoidHighways: false, avoidTolls: false } service.getDistanceMatrix(request).then((response) => { for(var i in response.rows){ document.getElementById('distance').innerHTML = response.rows[0].elements[0].distance.text; //test in console console.log(response.rows[0].elements[0].distance.text); }

en el archivo console.log obtendría todos los cálculos enumerados, pero cuando miro el sitio web real, solo muestra el cálculo para la primera lista comercial

negocio div 1. 12 millas (solo se muestra en el primer div)
negocio div 2
negocio div 3 etc

Enlace a la documentación de Google Distance Matrix https://developers.google.com/maps/documentation/javascript/distancematrix