Place Autocomplete

by mpsingh2003

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!DOCTYPE html>
<html>
  <head>
    <title>Place Autocomplete</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCcp9A9-gxq8W1HXWupwpFNI5ikYJHAk2g&libraries=places">
    </script>

  </head>
  <body class="p-5">
    <div class="form-group">
      <b>Address</b>
      <input id="searchTextField" class="form-control" placeholder="Start Typing">
    </div>

    </br>

    <div id="js-api-response" class="m-4 border p-3" style="display: none;">
      <h3 class="border-bottom" >Details</h3>
      <dl class="row">
        <dt class="col-sm-3">Country</dt>
        <dd id="js-country" class="col-sm-9"></dd>

        <dt class="col-sm-3">City</dt>
        <dd id="js-city" class="col-sm-9"></dd>

        <dt class="col-sm-3">State</dt>
        <dd id="js-state" class="col-sm-9"></dd>

        <dt class="col-sm-3">PostCode</dt>
        <dd id="js-postcode" class="col-sm-9"></dd>
      </dl>
    </div>
  </body>
</html>

CSS

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#description {
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
}

#infowindow-content .title {
  font-weight: bold;
}

#infowindow-content {
  display: none;
}

#map #infowindow-content {
  display: inline;
}

.pac-card {
  margin: 10px 10px 0 0;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  font-family: Roboto;
}

#pac-container {
  padding-bottom: 12px;
  margin-right: 12px;
}

.pac-controls {
  display: inline-block;
  padding: 5px 11px;
}

.pac-controls label {
  font-family: Roboto;
  font-size: 13px;
  font-weight: 300;
}

#pac-input {
  background-color: #fff;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  margin-left: 12px;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 400px;
}

#pac-input:focus {
  border-color: #4d90fe;
}

#title {
  color: #fff;
  background-color: #4d90fe;
  font-size: 25px;
  font-weight: 500;
  padding: 6px 12px;
}

JavaScript

let autocomplete = new google.maps.places.Autocomplete(
  document.getElementById('searchTextField'), 
  {
    fields: ["address_components"]
  }
);
	
autocomplete.addListener('place_changed', function() {
  var place = autocomplete.getPlace();

  console.log(place.address_components);

  document.getElementById("js-api-response").style.display = 'block';
  let response = place.address_components.reduce( (acc,element) => {
    acc.postCode = element.types.includes("postal_code") ?
      element.long_name :
    acc.postCode;
    acc.country = element.types.includes("country") ?
      element.long_name : 
    acc.country;
    acc.state = element.types.includes("administrative_area_level_1") ? 
      element.long_name : 
    acc.state;
    acc.city = element.types.includes("locality") ? 
      element.long_name :
    acc.city;
    return acc;
  }, {
    "postCode":null,
    "country":null,
    "state":null,
    "city":null
  });

  if (response.city == null)
    response.city =	place.address_components
      .find(element => element.types.includes("postal_town") )?.long_name;

  document.getElementById("js-postcode").innerHTML = response.postCode;
  document.getElementById("js-country").innerHTML = response.country;
  document.getElementById("js-state").innerHTML = response.state
  document.getElementById("js-city").innerHTML = response.city;
});