¡Creemos un formulario que utilice la ubicación actual en un mapa!

Me encanta comprar en línea. Puedo encontrar lo que necesito y conseguir la mayoría de las cosas a un precio decente. Soy nigeriano y actualmente trabajo y estudio en la India, y dos cosas que temo cuando compro en línea son:

1. Llenar un formulario de tarjeta de crédito
2. Completar formularios de dirección de envío y facturación

Tal vez simplemente soy un vago, ¡pero estas cosas no están exentas de desafíos! Para el primero, gracias a los servicios de procesamiento de pagos como PayPal y billeteras electrónicas, no tengo que ingresar mi número de tarjeta de crédito de 12 dígitos para cada nuevo sitio de comercio electrónico que visite, ni tengo que guardar los datos de mi tarjeta. . de crédito con ellos. .

Para el segundo, la única opción para ahorrar tiempo que ofrecen la mayoría de los sitios web de compras es guardar su dirección de envío, pero aún así debe completar el formulario (¡arrghh!). Aquí es donde está el desafío. Me devolvieron la mayoría de mis pedidos porque la aplicación no pudo localizar ni confirmar mi dirección (que pensé que era la dirección correcta) por una razón u otra.

Las entradas de direcciones son un desafío.

Obtener la dirección de un usuario a través de un formulario de entrada es una solución limpia, pero también puede ser una tarea hercúlea para el usuario. Este es el por qué:

• Si el usuario es nuevo en una ciudad en particular, es posible que no sepa su dirección completa.
• Si el usuario desea realizar un envío a una nueva dirección que no está guardada (por ejemplo, realizar un envío a un lugar de trabajo o a la dirección de un amigo en lugar de la dirección particular guardada)
• Si el usuario reside en una ciudad con sistemas de direcciones muy difíciles
• Si el usuario simplemente vago como yo

Una posible solución: obtener la dirección automáticamente

Obtener la dirección del usuario con solo tocar o hacer clic en un botón. ¡Sí, es muy fácil! La experiencia de usuario es excelente, ya que le ahorra al usuario el tiempo y el esfuerzo de completar un formulario. También le ahorrará tiempo, esfuerzo e incluso dinero al dueño de la tienda en algunos casos, ya que probablemente habrá una reducción en la cantidad de pedidos o envíos incorrectos.

Vamos a crear una mini aplicación que obtenga la dirección de un usuario y la muestree en una interfaz de Google Maps usando JavaScript. El concepto es el siguiente:

1. Obtenga el botón HTML y escuche un evento de clic
2. Obtenga la ubicación del usuario (latitud y longitud) con solo hacer clic en un botón
3. Mostrar la ubicación del usuario en un mapa de Google
4. Pase la latitud y longitud a la URL de la API Geocode de Google Maps
5. Mostrar la dirección de vuelta (o lista de direcciones) en la interfaz de usuario para que el usuario seleccione una
6. Escuche los eventos del mapa y repita los pasos 4 y 5.
7. Precompletar el formulario con los datos de dirección que el usuario seleccione

Comenzando y configurando

Para crear esta aplicación, usaremos el marco CSS Materialize para ahorrarnos algo de tiempo con los estilos. Materialise es un marco de interfaz de usuario moderno y receptivo basado en el sistema Material Design de Google. La versión beta funciona con JavaScript básico.

Una configuración básica que utiliza los archivos CSS y JavaScript de Materialise en un documento es la siguiente:

!DOCTYPE htmlhtmlhead  meta charset="UTF-8"  meta name="viewport" content="width=device-width, initial-scale=1.0"  titleAddress Locator/title  link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css"  link rel="stylesheet" href="css/main.css"/headbody  script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"/script  script src="js/main.js"/script/body/html

También utilizaremos la API de Google Maps para mostrar el mapa y obtener la dirección legible por los humanos del usuario. Necesitaremos una clave API para hacer esto. Aquí cómo conseguir uno:

1. Inicia sesión en tu cuenta de Consola de desarrollador de Google
2. Crea un nuevo proyecto o selecciona uno existente
3. Haga clic en “Habilitar API y servicios”
4. Seleccione la opción “Mapas Javascript API”
5. Haga clic en “Activar” en la nueva página que aparece. Vuelva a la página anterior y busque “API de codificación geográfica”, haga clic en ella y habilítela también.
6. Luego, en el navegador derecho de la página, haga clic en Credenciales, copie la clave API en la página y guárdela en un archivo.

Ahora, actualizamos nuestro documento para mostrar el mapa y permitirle al usuario saber que puede usar para obtener su ubicación actual como dirección. Además, agregaremos un formulario que se completará previamente con la dirección que seleccione el usuario.

...body  div    h3Shipping Address/h3    pYou can click the button below to use your current location as your shipping address/p    div    /div    buttonUse My Location/button    form      div/div      br      div        textarea type="text"/textarea        label for="address"Address (Area and Street)/label      /div      div        input type="text"        label for="locality"Locality/label      /div      div        input type="text"        label for="city"City/District/Town/label      /div      div        input type="text"        label for="pin_code"Pin Code/label      /div      div        input type="text"        label for="landmark"Landmark/label      /div      div        input type="text"        label for="State"State/label      /div    /form    !-- You could add a fallback address gathering form here --  /div  script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"/script  script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"/script  script src="js/main.js"/script/body/html

Mientras estamos aquí, diseñamos un poco las cosas para que esto se vea un poco mejor:

.container {  width: 50%;  max-width: 800px;}#map {  height: 50vh;  margin-bottom: 10px;  display: none;}#locationList .card {  padding: 10px;}#toast-container {  top: 50%;  bottom: unset;}.toast {  background-color: rgba(0, 0, 0, 0.8);}@media only screen and (max-width: 768px) {  .container {    width: 80%;  }}

Este CSS oculta el mapa hasta que estemos listos para verlo. Nuestras aplicaciones deberían decir lo siguiente:

Vamos a planificar esto

Nuestra aplicación utilizará la API de geolocalización HTML5 para determinar la ubicación actual de nuestro usuario, así como la API de geocodificación de Google con una técnica llamada codificación geográfica inversa. La API Geocode toma una dirección legible para humanos y la convierte en coordenadas geográficas (latitudinales y longitudinales) y marca el lugar en el mapa.

La geocodificación inversa hace lo contrario. Toma la latitud y la longitud y las convierte en direcciones legibles para humanos. La geocodificación y la geocodificación inversa están bien documentadas.

Así es como funcionará nuestra aplicación:

1. El usuario hace clic en el botón “Usar mi ubicación”
2. Se localiza al usuario con la API de Geolocalización HTML5 ( navigator.geolocation)
3. Obtenemos las coordenadas geográficas del usuario.
4. Pasamos las coordenadas a la API de solicitud de geocodificación.
5. Mostramos las direcciones resultantes al usuario.

La mayoría de las veces, el código geográfico devuelve más de una dirección, por lo que tendríamos que mostrarle al usuario todas las direcciones de vueltas y dejarle elegir la más precisa.

¡Uf! Finalmente, podemos llegar a la parte divertida de escribir JavaScript. Repasemos cada uno de los pasos que describimos.

Paso 1: hacer clic en el botón

En nuestro main.jsarchivo, obtenemos una referencia al botón HTML. Mientras estamos en ello, configuraremos algunas otras variables que necesitaremos, como nuestra clave API.

//This div will display Google mapconst mapArea = document.getElementById('map');//This button will set everything into motion when clickedconst actionBtn = document.getElementById('showMe');//This will display all the available addresses returned by Google's Geocode Apiconst locationsAvailable = document.getElementById('locationList');//Let's bring in our API_KEYconst __KEY = 'YOUR_API_KEY';//Let's declare our Gmap and Gmarker variables that will hold the Map and Marker Objects later onlet Gmap;let Gmarker;//Now we listen for a click event on our buttonactionBtn.addEventListener('click', e = {  // hide the button   actionBtn.style.display = "none";  // call Materialize toast to update user   M.toast({ html: 'fetching your current location', classes: 'rounded' });  // get the user's position  getLocation();});

Cuando se ejecuta el controlador de clic para nuestro botón,:

1. Oculta el botón
2. Alerta al usuario que estamos obteniendo su ubicación actual (un “brindis” en Materialise es como una notificación emergente)
3. Llama a la getLocationfunción

Paso 2: Obtenga la ubicación del usuario (latitud y longitud)

Cuando se invoca nuestra getLocationfunción, necesitamos trabajar un poco más. Primero, verificamos si podemos utilizar la API de geolocalización:

getLocation = () = {  // check if user's browser supports Navigator.geolocation  if (navigator.geolocation) {    navigator.geolocation.getCurrentPosition(displayLocation, showError, options);  } else {    M.toast({ html: "Sorry, your browser does not support this feature... Please Update your Browser to enjoy it", classes: "rounded" });  }}

Cuando tengamos soporte, llama al getCurrentPositionmétodo de geolocalización. Si no tiene soporte, avise al usuario de que no hay soporte para el navegador.

Si hay soporte, entonces getCurrentLocationse utiliza el método para obtener la ubicación actual del dispositivo. La sintaxis es así:

navigator.geolocation.getCurrentPosition(*success, error, [options]*)

• success:Esta es una función de devolución de llamada que toma una posición como único parámetro. Para nosotros, nuestra función de devolución de llamada exitosa es la displayLocationfunción.
• error: [opcional] Esta es una función de devolución de llamada que toma PositionErrorcomo único parámetro de entrada. Puede leer más sobre esto aquí. Nuestra función de devolución de llamada de error es la showErrorfunción.
• options: [opcional] Este es un objeto que describe la optionspropiedad que se pasará al getCurrentPositionmétodo. Puedes leer más sobre esto aquí . El parámetro de opciones es el optionsobjeto.

Antes de escribir nuestra displayLocationfunción, manejemos la showErrorfunción y optionsel objeto:

// Displays the different error messagesshowError = (error) = {  mapArea.style.display = "block"  switch (error.code) {    case error.PERMISSION_DENIED:      mapArea.innerHTML = "You denied the request for your location."      break;    case error.POSITION_UNAVAILABLE:      mapArea.innerHTML = "Your Location information is unavailable."      break;    case error.TIMEOUT:      mapArea.innerHTML = "Your request timed out. Please try again"      break;    case error.UNKNOWN_ERROR:      mapArea.innerHTML = "An unknown error occurred please try again after some time."      break;  }}//Makes sure location accuracy is highconst options = {  enableHighAccuracy: true}

Ahora, escribimos el código de nuestra displayLocationfunción dentro de nuestro main.jsarchivo:

displayLocation = (position) = {  const lat = position.coords.latitude;  const lng = position.coords.longitude;}

Ahora tenemos la latitud y longitud de nuestro usuario y podemos verlas en la consola escribiendo el siguiente código dentro displayLocation:

console.log( `Current Latitude is ${lat} and your longitude is ${lng}` );

Paso 3: muestra la ubicación actual del usuario en un mapa de Google

Para hacer esto, agregaremos estas líneas de código a nuestra displayLocationfunción.

const latlng = {lat, lng}showMap(latlng);createMarker(latlng);mapArea.style.display = "block";

La primera línea toma nuestros latvalores lngy los encapsula en el latlngobjeto literal. Esto nos facilita su uso en nuestra aplicación.

La segunda línea de código llama a una showMapfunción que acepta un latlngargumento. Aquí, podemos crear una instancia de nuestro mapa de Google y representarlo en nuestra interfaz de usuario.

La tercera línea invoca una createMarkerfunción que también acepta nuestro objeto literal ( latlng) como argumento y lo utiliza para crear un marcador de Google Maps para nosotros.

La cuarta línea hace mapAreavisible lo que nuestro usuario ahora puede ver la ubicación.

displayLocation = (position) = {  const lat = position.coords.latitude;  const lng = position.coords.longitude;  const latlng = { lat, lng }  showMap(latlng);  createMarker(latlng);  mapArea.style.display = "block";}

Ahora comencemos a crear nuestras funciones. Empezaremos con la showMapfunción.

showMap = (latlng) = {  let mapOptions = {    center: latlng,    zoom: 17  };  Gmap = new google.maps.Map(mapArea, mapOptions);}

La showMapfunción crea mapOptionsobjetos que contienen el centro del mapa (que son las coordenadas laty lngque obtuvimos displayLocation) y el nivel de zoom del mapa. Finalmente, creamos una instancia de la clase Google Maps y la pasamos a nuestro mapa. En pocas palabras, creamos una instancia de la clase Google Maps.

Para crear una instancia de mapa, especificamos dos parámetros en el constructor: el que divse mostrará el mapa y el mapOptions. En nuestro caso, se llama a nuestro div mapAreay mapOptionsa nuestro mapOptions. Después de esto, se mostrará nuestro mapa creado, pero sin un marcador. Necesitamos un marcador para que el usuario pueda identificar su posición actual en el mapa.

Creemos nuestro marcador usando la createMarkerfunción:

createMarker = (latlng) = {  let markerOptions = {    position: latlng,    map: Gmap,    animation: google.maps.Animation.BOUNCE,    clickable: true  };  Gmarker = new google.maps.Marker(markerOptions);}

Algunas cosas a tener en cuenta en este código:

1. La positionpropiedad posiciona el marcador en el lugar especificado.latlng
2. La mappropiedad especifica la instancia del mapa donde se debe representar el marcador (en nuestro caso, es Gmap)
3. La animationpropiedad añade un poco BOUNCEa nuestro marcador.
4. La clickablepropiedad establecida en truesignifica que se puede hacer clic en nuestro marcador.
5. Finalmente, creamos una instancia de la clase Marker en nuestra Gmarkervariable de instancia.

Hasta ahora, se obtuvo la ubicación de nuestro usuario, el mapa se representó y el usuario puede ver su ubicación actual en el mapa. ¡Las cosas pintan bien!

Paso 4: Pasar la latitud y la longitud a la API de geocodificación

La API de codificación geográfica de Google se utilizará para convertir las coordenadas geográficas numéricas de nuestro usuario en una dirección formateada y legible por humanos mediante el proceso de codificación geográfica inversa que cubrimos anteriormente.

La URL tiene este formato:

https://maps.googleapis.com/maps/api/geocode/outputFormat?parameters

…donde outputFormatpuede ser un jsono xmlun que determina el formato utilizado para entregar los datos. La parametersparte es una lista de parámetros necesarios para la solicitud.

Nuestra URL de solicitud se verá así:

https://maps.googleapis.com/maps/api/geocode/json?latlng=${latlng}key=${__KEY}

Sigamos adelante y conectémonos a la API. Haríamos esto en una función llamada getGeolocation.

getGeolocation = (lat, lng) = {  const latlng = lat + "," + lng;  fetch( `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latlng}key=${__KEY}` )    .then(res = res.json())    .then(data = console.log(data.results));}

La getGeolocationfunción toma dos argumentos ( lat y lng} los concatena para formar una nueva latlngvariable que se pasa a la URL.

Usando la API Fetch (más sobre esto aquí), agregamos el nuevo latlngy __KEYen la URL de solicitud de Geocodificación. Luego, en el objeto de respuesta que recibimos, pasamos el .jsonmétodo para resolver la promesa con JSON. Finalmente, registramos la respuesta en nuestra consola.

Para utilizar nuestra función recién creada, tenemos que llamarla en la displayLocationfunción. Por lo tanto, actualizamos nuestra displayLocationfunción para que contenga la getGeolocationllamada a la función:

displayLocation = (position) = {  const lat = position.coords.latitude;  const lng = position.coords.longitude;  const latlng = { lat, lng }  showMap(latlng);  createMarker(latlng);  mapArea.style.display = "block";  getGeolocation(lat, lng)// our new function call}

Los datos devueltos deberían verse así:

{  "results" :     {      "address_components":         {          "long_name": "1600",          "short_name": "1600",          "types": ["street_number"]        },        {          "long_name": "Amphitheatre Pkwy",          "short_name": "Amphitheatre Pkwy",          "types": ["route"]        },        {          "long_name": "Mountain View",          "short_name": "Mountain View",          "types": ["locality", "political"]        },        {          "long_name": "Santa Clara County",          "short_name": "Santa Clara County",          "types": ["administrative_area_level_2", "political"]        },        {          "long_name": "California",          "short_name": "CA",          "types": ["administrative_area_level_1", "political"]        },        {          "long_name": "United States",          "short_name": "US",          "types": ["country", "political"]        },        {          "long_name": "94043",          "short_name": "94043",          "types": ["postal_code"]        }      ],      "formatted_address": "1600 Amphitheatre Parkway, Mountain View, CA 94043, USA",      "geometry": {        "location": {          "lat": 37.4224764,          "lng": -122.0842499        },        "location_type": "ROOFTOP",        "viewport": {          "northeast": {            "lat": 37.4238253802915,            "lng": -122.0829009197085          },          "southwest": {            "lat": 37.4211274197085,            "lng": -122.0855988802915          }        }      },      "place_id": "ChIJ2eUgeAK6j4ARbn5u_wAGqWA",      "types": ["street_address"]    }  ],  "status" : "OK"}

Paso 5: Muestra las direcciones de vueltas para que el usuario las seleccione

En esta etapa, hemos realizado una solicitud a la API de codificación geográfica de Google y hemos registrado nuestro resultado en la consola. Ahora, tenemos que mostrar los resultados en una interfaz de usuario para nuestro usuario. Esto requiere dos cosas:

1. Crear una nueva función que maneje la creación de elementos HTML
2. Actualice nuestra getGeolocationfunción para realizar la llamada a la función.

Creemos la función que se encargaría de crear los elementos HTML y actualizar el DOM.

populateCard = (geoResults) = {  geoResults.map(geoResult = {    // first create the input div container    const addressCard = document.createElement('div');    // then create the input and label elements    const input = document.createElement('input');    const label = document.createElement('label');    // then add materialize classes to the div and input    addressCard.classList.add("card");    input.classList.add("with-gap");    // add attributes to them    label.setAttribute("for", geoResult.place_id);    label.innerHTML = geoResult.formatted_address;    input.setAttribute("name", "address");    input.setAttribute("type", "radio");    input.setAttribute("value", geoResult.formatted_address);    input.setAttribute("id", geoResult.place_id);    addressCard.appendChild(input);    addressCard.appendChild(label)    return (      // append the created div to the locationsAvailable div      locationsAvailable.appendChild(addressCard)    );  })}

En esta función, iteramos a través de nuestros resultados y creamos algunos elementos HTML ( div, inputya label), agregamos inputy labelal divy finalmente agregamos el nuevo diva un padre div(que es locationsAvailable). Una vez que obtengamos el resultado de nuestra llamada API, nuestro DOM se creará y se mostrará al usuario.

A continuación, actualizamos nuestra getGeolocationfunción para llamar a nuestra populateCardfunción reemplazando la última línea getGeolocationcon esto:

.then(data = populateCard(data.results));

…lo que significa que nuestra función actualizada debería verse así:

getGeolocation = (lat, lng) = {  const latlng = lat + "," + lng;  fetch( `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latlng}key=${__KEY}` )    .then(res = res.json())    .then(data = populateCard(data.results));}

En este punto, todo debería estar funcionando bien. Nuestro usuario hace clic en un botón y obtiene una ubicación que se muestra en el mapa junto con una lista de direcciones que coinciden con la ubicación actual.

Paso 6: Escuche los eventos del mapa y repita los pasos 4 y 5

Si nuestro usuario decide mover el mapa o marcador, no le sucede nada a la interfaz de usuario: las nuevas direcciones no se muestran y todo permanece estático. Tenemos que solucionar este problema, así que hagamos que nuestra aplicación sea dinámica escuchando los eventos del mapa. Puede leer todo sobre Eventos de Google Maps aquí.

Hay tres eventos que queremos escuchar:

1. drag:Esto se activa una vez que el usuario comienza a arrastrar y continúa arrastrando el mapa.
2. dragend: Esto se activa una vez que el usuario deja de arrastrar el mapa.
3. idle:Esto se activa una vez que se ha activado cada evento y el mapa está inactivo.

Pregunta rápida: ¿Por qué estos eventos son los más adecuados para nuestra aplicación?

Respuesta rápida: Los primeros dos eventos garantizarán que nuestro marcador de mapa permanezca en el centro del mapa durante el evento de arrastre, mientras que el evento inactivo realizará una solicitud de geocodificación con las nuevas coordenadas.

Para escuchar estos eventos tenemos que actualizar la showMapfunción con lo siguiente:

Gmap.addListener('drag', function () {  Gmarker.setPosition(this.getCenter()); // set marker position to map center});Gmap.addListener('dragend', function () {  Gmarker.setPosition(this.getCenter()); // set marker position to map center});Gmap.addListener('idle', function () {  Gmarker.setPosition(this.getCenter()); // set marker position to map center  if (Gmarker.getPosition().lat() !== lat || Gmarker.getPosition().lng() !== lng) {    setTimeout(() = {      updatePosition(this.getCenter().lat(), this.getCenter().lng()); // update position display    }, 2000);  }});

Como se explicó anteriormente, los dos primeros detectores de eventos simplemente aseguran que el marcador permanezca en el centro de nuestro mapa. Preste más atención al idledetector de eventos porque ahí es donde está la acción.

Una vez que se dispara el evento inactivo, el marcador se desplaza al centro, luego se realiza una verificación para saber si la posición actual del marcador es la misma que la de los valores lato lngque recibe la displayLocationfunción. Si no es la misma, entonces llamamos a la updatePositionfunción después de dos segundos de inactividad.

Dicho esto, tenemos que realizar algunas actualizaciones a la showMapfunción. Primero, en el encabezado de la función, tenemos que incluir más parámetros y en la showMapllamada a la función. También necesitamos agregar los nuevos argumentos allí. Nuestra showMapfunción debería verse así:

showMap = (latlng, lat, lng) = {  let mapOptions = {    center: latlng,    zoom: 17  };  Gmap = new google.maps.Map(mapArea, mapOptions);  Gmap.addListener('drag', function () {    Gmarker.setPosition(this.getCenter()); // set marker position to map center  });  Gmap.addListener('dragend', function () {    Gmarker.setPosition(this.getCenter()); // set marker position to map center  });  Gmap.addListener('idle', function () {    Gmarker.setPosition(this.getCenter()); // set marker position to map center    if (Gmarker.getPosition().lat() !== lat || Gmarker.getPosition().lng() !== lng) {      setTimeout(() = {        updatePosition(this.getCenter().lat(), this.getCenter().lng()); // update position display      }, 2000);    }  });}

Y nuestra displayLocationfunción debería decir así:

displayLocation = (position) = {  const lat = position.coords.latitude;  const lng = position.coords.longitude;  const latlng = { lat, lng }  showMap(latlng, lat, lng); //passed lat and lng as the new arguments to the function  createMarker(latlng);  mapArea.style.display = "block";  getGeolocation(lat, lng);}

Después de escuchar los eventos del mapa, repetimos el paso 4 y el paso 5.

Comenzamos escribiendo nuestra updatePositionfunción. Esta función realizará una sola acción por ahora, que es pasar los valores nuevos latya la función:lnggetGeolocation

updatePosition = (lat, lng) = {  getGeolocation(lat, lng);}

Después de obtener la nueva posición y obtener las direcciones, nuestro DOM debería volver a renderizarse para el usuario, ¿no es así? Pues no lo hace. Y para solucionarlo, creamos una función que obligará al DOM a volver a renderizarse:

// check if the container has a child node to force re-render of domfunction removeAddressCards(){  if (locationsAvailable.hasChildNodes()) {    while (locationsAvailable.firstChild) {      locationsAvailable.removeChild(locationsAvailable.firstChild);    }  }}

Comprueba si locationsAvailable divhay alguna childNodedirección y, si la hay, la elimina antes de crear nuevas tarjetas de dirección. La populateCardfunción ahora se ha actualizado de la siguiente manera:

populateCard = (geoResults) = {  // check if a the container has a child node to force re-render of dom  removeAddressCards();    geoResults.map(geoResult = {    // first create the input div container    const addressCard = document.createElement('div');    // then create the input and label elements    const input = document.createElement('input');    const label = document.createElement('label');    // then add materialize classes to the div and input    addressCard.classList.add("card");    input.classList.add("with-gap");    // add attributes to them    label.setAttribute("for", geoResult.place_id);    label.innerHTML = geoResult.formatted_address;    input.setAttribute("name", "address");    input.setAttribute("type", "radio");    input.setAttribute("value", geoResult.formatted_address);    input.setAttribute("id", geoResult.place_id);    addressCard.appendChild(input);    addressCard.appendChild(label);    return (      locationsAvailable.appendChild(addressCard);    );  })}

¡Hemos terminado y ahora podemos obtener y mostrar completamente la dirección del usuario!

Paso 7: Complete previamente el formulario con los datos de dirección que seleccione el usuario

El último paso es completar el formulario con la dirección que selecciona el usuario. Necesitamos agregar un detector de eventos de clic a la tarjeta de dirección y pasar la dirección como argumento a la función de devolución de llamada.

Así es como agregamos el detector de eventos en la populateCardfunción:

input.addEventListener('click', () = inputClicked(geoResult));

Debe tener en cuenta que el geoResultargumento en la devolución de llamada anterior es el objeto de dirección seleccionado de la resultsmatriz. Dicho esto, actualice la populateCardfunción para acomodar nuestra nueva línea de código.

La inputClickedfunción utiliza una serie de ifdeclaraciones para asignar valores a nuestros elementos del formulario. Así que antes de trabajar en ella, traigamos nuestros elementos de formulario a la ecuación:

const inputAddress = document.getElementById('address'),  inputLocality = document.getElementById('locality'),  inputPostalCode = document.getElementById('postal_code'),  inputLandmark = document.getElementById('landmark'),  inputCity = document.getElementById('city'),  inputState = document.getElementById('state');

Una vez hecho esto, trabajemos ahora en completar previamente el formulario con address_componentsla inputClickedfunción.

inputClicked = result = {  result.address_components.map(component = {    const types = component.types    if (types.includes('postal_code')) {      inputPostalCode.value = component.long_name    }    if (types.includes('locality')) {      inputLocality.value = component.long_name    }    if (types.includes('administrative_area_level_2')) {      inputCity.value = component.long_name    }    if (types.includes('administrative_area_level_1')) {      inputState.value = component.long_name    }    if (types.includes('point_of_interest')) {      inputLandmark.value = component.long_name    }  });  inputAddress.value = result.formatted_address;  // to avoid labels overlapping pre-filled input contents  M.updateTextFields();  // removes the address cards from the UI  removeAddressCards();}

El bloque de código anterior itera sobre el componente de dirección en el que se hizo clic (o seleccionado), verifica los tipos de componentes y finalmente los asigna a los campos de entrada si coinciden.

M.updateTextFields()La función es de Materialise y garantiza que la etiqueta no se superponga con los valores de los campos de entrada y la removeAddressCards()función elimina las tarjetas de dirección de la interfaz de usuario.

Con esto, hemos terminado con nuestra aplicación y les hemos ahorrado a nuestros usuarios muchos dolores de cabeza y errores de escritura. Seguramente nos agradeceremos que hayamos implementado una solución tan sencilla.

Todo este experimento de UX puede verse como un atajo que ayud