Zip into address via Google Maps

Translate Zip Code into a valid address via Google Maps APIs

by Jesse Johnson

HTML

<p id="address"></p>

CSS

body {
  margin: 2rem;
  color: #2c2c2c;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

#address {
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.6rem;
}

JavaScript

const zip = 92618;
const token = "";
fetch(`https://maps.googleapis.com/maps/api/geocode/json?address=${zip}&key=${token}`)
  .then(response => response.json())
  .then(results => results.results[0].geometry.location)
  .then(location => `${location.lat},${location.lng}`)
  .then(coordinates => fetch(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${coordinates}&result_type=street_address&key=${token}`)
    .then(response => response.json())
    .then(results => results.results[0].formatted_address)
    .then(address => document.querySelector("#address").innerHTML = address));