Place Autocomplete Address Form

Sample code for Google Maps Platform JavaScript API author(s): Justin Poehnelt

by owen_pengtao

HTML

<html lang="en">

  <head>
    <title>Google Address Autocomplete</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>

  <body>
    <form style="width: 600px; margin: 100px auto 0; top: 200px;">
      <div class="form-group row">
        <label for="address" class="col-sm-2 col-form-label">Address</label>
        <div class="col-sm-10">
          <input type="text" id="address" class="form-control" autocomplete="off" placeholder="Enter a location" />
        </div>
      </div>

      <div class="form-group row">
        <label for="city" class="col-sm-2 col-form-label">City</label>
        <div class="col-sm-10">
          <input type="text" id="city" class="form-control" autocomplete="off" />
        </div>
      </div>

      <div class="form-group row">
        <label for="county" class="col-sm-2 col-form-label">County</label>
        <div class="col-sm-10">
          <input type="text" id="county" class="form-control" autocomplete="off" />
        </div>
      </div>

      <div class="form-group row">
        <label for="state" class="col-sm-2 col-form-label">State</label>
        <div class="col-sm-10">
          <input type="text" id="state" class="form-control" autocomplete="off" />
        </div>
      </div>

      <div class="form-group row">
        <label for="postcode" class="col-sm-2 col-form-label">Postcode</label>
        <div class="col-sm-10">
          <input type="text" id="postcode" class="form-control" autocomplete="off" />
        </div>
      </div>

      <div class="form-group row">
        <label for="country" class="col-sm-2 col-form-label">Country</label>
        <div class="col-sm-10">
          <input type="text" id="country" class="form-control" autocomplete="off" />
        </div>
      </div>
    </form>
    <script>
      const addressSelector = {
 ...